import { FC } from 'react';
import { Group } from '../../components/Group';
import { Approval } from '../../types/approval';

type UploadFilesProps = {
  approval?: Approval;
  handleFileUpload: (files: FileList) => void;
  handleDeleteFile: (index: number) => void;
};

export const UploadFiles: FC<UploadFilesProps> = ({
  approval,
  handleFileUpload,
  handleDeleteFile,
}) => {
  return (
    <div className="flex flex-col">
      <div className="flex flex-col gap-4">
        <p className="mb-4 text-2xl font-bold">Approval</p>
      </div>
      <div className="flex flex-col gap-4">
        <div>
          <Group className="flex items-center gap-2">
            <p className="font-bold">Upload Files:</p>
            <button
              className="hover:bg-blue-600 rounded bg-blue-5 p-1 text-white"
              onClick={() => {
                const fileInput = document.getElementById(
                  'fileInput',
                ) as HTMLInputElement;
                fileInput.click();
              }}
            >
              <div className="i-ant-design-upload-outlined text-2xl" />
            </button>
            <input
              id="fileInput"
              type="file"
              multiple
              className="hidden"
              onChange={(e) =>
                e.target.files && handleFileUpload(e.target.files)
              }
            />
          </Group>
          <table className="mt-2 w-full">
            <tbody>
              {approval?.files.map((file, index) => (
                <tr key={index} className="border-b last:border-b-0">
                  <td className="py-2">
                    <div className="text-gray-600 dark:text-gray-400">
                      {file.name}
                    </div>
                  </td>
                  <td className="w-10 py-2 text-right">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        const url = window.URL.createObjectURL(file);

                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', file.name);

                        document.body.appendChild(link);

                        link.click();

                        link.parentNode?.removeChild(link);
                      }}
                      className="text-red-500 hover:text-red-700 bg-transparent"
                    >
                      <div className="i-ant-design-download-outlined text-3xl" />
                    </button>
                  </td>
                  <td className="w-10 py-2 text-right">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDeleteFile(index);
                      }}
                      className="text-red-500 hover:text-red-700 bg-transparent"
                    >
                      <div className="i-ant-design-delete-outlined text-3xl" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};