import React from 'react';
import { FaPencilAlt } from 'react-icons/fa';
import { Module } from '@/interfaces';
import clsx from 'clsx';
import WordUploader from './WordUploader';
import GenLoader from '../Exercises/Shared/GenLoader';
import useExamEditorStore from '@/stores/examEditor';

const ImportOrFromScratch: React.FC<{ 
  module: Module; 
  setNumberOfLevelParts: (parts: number) => void;
}> = ({ module, setNumberOfLevelParts }) => {
  const { currentModule, dispatch } = useExamEditorStore();
  const { importing } = useExamEditorStore((store) => store.modules[currentModule])

  const handleClick = () => {
    dispatch({ type: "UPDATE_MODULE", payload: { updates: { importModule: false } } });
  }

  return (
    <>
      {importing ? (
        <GenLoader module={module} custom={`Importing ${module} exam ...`} className='flex flex-grow justify-center bg-slate-200 ' />
      ) : (
        <div className="grid grid-cols-2 w-full flex-1 gap-6">
          <button
            onClick={handleClick}
            className={clsx(
              "flex flex-col items-center flex-1 gap-6 justify-center p-8",
              "border-2 border-gray-200 rounded-xl",
              `bg-ielts-${module}/20 hover:bg-ielts-${module}/30`,
              "transition-all duration-300",
              "shadow-sm hover:shadow-md group")}
          >
            <div className="transform group-hover:scale-105 transition-transform duration-300">
              <FaPencilAlt className={clsx("w-20 h-20 transition-colors duration-300",
                module === "reading" && "text-indigo-800 group-hover:text-indigo-950",
                module === "listening" && "text-purple-800 group-hover:text-purple-950",
                module === "level" && "text-teal-700 group-hover:text-teal-900"
              )} />
            </div>
            <span className={clsx("text-lg font-bold transition-colors duration-300",
              module === "reading" && "text-indigo-800 group-hover:text-indigo-950",
              module === "listening" && "text-purple-800 group-hover:text-purple-950",
              module === "level" && "text-teal-700 group-hover:text-teal-900"
            )}>
              Start from Scratch
            </span>
          </button>
          <div className='h-full'>
            <WordUploader module={module} setNumberOfLevelParts={setNumberOfLevelParts} />
          </div>
        </div>
      )}
    </>
  );
};

export default ImportOrFromScratch;