import ky from 'ky';
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useAppDispatch } from '../../app/hooks';
import DataUtils from '../data/DataUtils';
import Loading from '../loading/Loading';
import NotFound from '../not-found/NotFound';
import { setTitle } from '../page-title/pageTitleSlice';
import styles from './DataDetail.module.css';

interface DetailDataJson {
  title: string;
  author: string;
  figure: {
    file: string;
    caption: string;
  };
  download: string;
  view: string;
  mouseLine: string;
  imagingArea: string;
  cellType: string[];
  postnatalDays: number;
  imagingVolumeSize: string;
  imagingDepth: string;
  journal: string;
  summary: string;
  releaseDate: string;
}

interface Props {
  name: string;
}

const DataDetail: React.FC<Props> = ({ name }) => {
  const dispatch = useAppDispatch();
  const [data, setData] = useState<DetailDataJson | null>(null);
  const [error, setError] = useState(false);

  useEffect(() => {
    let isActive = true;

    if (!DataUtils.exists(name)) {
      return;
    }

    ky.get(`/data/${name}.json`)
      .json<DetailDataJson>()
      .then((result) => {
        if (isActive) {
          dispatch(setTitle(`DS: ${name}`));
          setData(result);
        }
      })
      .catch(() => {
        if (isActive) {
          setError(true);
        }
      });

    return () => {
      isActive = false;
    };
  }, [name, dispatch]);

  if (name === '' || error) {
    return <NotFound />;
  }
  if (!data) {
    return <Loading />;
  }

  return (
    <section className={styles.detail}>
      <h4 className={styles.title}>{data.title}</h4>
      <div className={styles.author}>{data.author}</div>
      <figure>
        <img src={data.figure.file} alt={data.figure.caption} />
        <figcaption>{data.figure.caption}</figcaption>
      </figure>
      <dl>
        <dt>Download &amp; View</dt>
        <dd>
          <a href={data.download}>Text download</a>
        </dd>
        <dd>
          <Link to={data.view}>View 3D structure</Link>
        </dd>
      </dl>
      <dl>
        <dt>Mouse line</dt>
        <dd>{data.mouseLine}</dd>
      </dl>
      <dl>
        <dt>Imaging area</dt>
        <dd>{data.imagingArea}</dd>
      </dl>
      <dl>
        <dt>Cell type</dt>
        {data.cellType.map((value, key) => {
          // biome-ignore lint/suspicious/noArrayIndexKey: cell type values may duplicate
          return <dd key={key}>{value}</dd>;
        })}
      </dl>
      <dl>
        <dt>Postnatal days</dt>
        <dd>{data.postnatalDays}</dd>
      </dl>
      <dl>
        <dt>Imaging volume size</dt>
        <dd>{data.imagingVolumeSize}</dd>
      </dl>
      <dl>
        <dt>Imaging depth</dt>
        <dd>{data.imagingDepth}</dd>
      </dl>
      <dl>
        <dt>Journal</dt>
        <dd>{data.journal}</dd>
      </dl>
      <dl>
        <dt>Summary</dt>
        {/* biome-ignore lint/security/noDangerouslySetInnerHtml: summary is trusted content from our own JSON */}
        <dd dangerouslySetInnerHTML={{ __html: data.summary }}></dd>
      </dl>
      <dl>
        <dt>Release date</dt>
        <dd>{data.releaseDate}</dd>
      </dl>
    </section>
  );
};

export default DataDetail;
