import { useRecoilValue } from "recoil";

import { collectionStore } from "../../stores";
import { handleFileInput } from "../../lib/playlists";
import FileUploadIcon from "../icons/FileUploadIcon";

const FileUploadCard = () => {
  const collection = useRecoilValue(collectionStore);

  return (
    <label
      htmlFor="upload-file"
      className="group btn flex flex-col justify-center items-center !p-0 !h-auto aspect-[22/23] object-cover rounded-lg shadow-orange hover:border-neutral-500 overflow-hidden transition-colors ease-in bg-base-100 border-2 box-content border-neutral-900 cursor-pointer text-neutral-900 bg-gradient-to-r from-orange-300 to-orange-600"
    >
      {collection.loading ? (
        <div className="flex items-center justify-center p-12">
          <div className="w-16 h-16 ease-linear border-4 border-t-4 rounded-full loader border-t-orange-300 border-neutral-900 animate-spin" />
        </div>
      ) : (
        <>
          <div className="flex flex-col items-center justify-center pt-5 pb-6">
            <FileUploadIcon />
            <p className="mt-4 mb-2 text-sm">
              <span className="text-sm font-bold">Click to upload</span>
            </p>
            <p className="text-xxs">JSON</p>
          </div>
          <input
            onChange={(e) => handleFileInput(e.target.files)}
            id="upload-file"
            type="file"
            multiple
            accept="application/json"
            className="hidden"
          />
        </>
      )}
    </label>
  );
};

export default FileUploadCard;