import { FormContext } from './context/form-context';
import type { Props } from './types';
import type * as IUS from '@/api/ius/types';
import { ArrowDownTrayIcon } from '@heroicons/react/24/solid';
import { Heading, InputFile } from '@repo/ui';
import Link from 'next/link';
import { useContext } from 'react';

type DownloadDocumentProps = Pick<FileProps, 'document'>;

function DownloadDocument({ document }: DownloadDocumentProps) {
  return document?.href ? (
    <Link
      href={'/api/ius' + document.href}
      target="_blank"
      rel="noopener noreferrer"
      className="text-primary-600 h-10 px-5 py-2.5 text-sm font-medium hover:underline"
    >
      <div className="flex flex-row items-center gap-1">
        <ArrowDownTrayIcon className="h-4 w-4" />
        Скачать
      </div>
    </Link>
  ) : (
    false
  );
}

type FileProps = {
  readonly document: IUS.Document | undefined;
  readonly documentType: IUS.DocumentType;
};

function File({ document, documentType }: FileProps) {
  const { documentTypeId, name } = documentType;
  const { formFiles, setFormFiles } = useContext(FormContext);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files !== null) {
      const file = event.target.files.item(0);
      if (file)
        setFormFiles([
          ...formFiles.filter((x) => x.documentTypeId !== documentTypeId),
          { documentTypeId, file, name },
        ]);
    }
  };

  return (
    <div key={documentTypeId} className="flex flex-col gap-1">
      <label className="mb-2 block text-sm font-normal text-gray-900">{name}:</label>
      <InputFile onChange={handleFileChange} />
      <DownloadDocument document={document} />
    </div>
  );
}

export function Files({ documentTypes, documents }: Props) {
  return (
    <div className="grid gap-4">
      <Heading className="text-sms">Документы</Heading>
      <div className="flex flex-col gap-2">
        {documentTypes.map((documentType) => (
          <File
            key={documentType.documentTypeId}
            documentType={documentType}
            document={documents.find((x) => x.documentTypeId === documentType.documentTypeId)}
          />
        ))}
      </div>
    </div>
  );
}