"use client";
import uploadInvoice from "@/app/api-requests/uploadInvoice";
import DragDropImage from "@/components/ui/DragDropImage";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import MainButton from "@/components/ui/MainButton";
import { toast } from "@/components/ui/use-toast";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { useEffect } from "react";
import LogoTitle from "../login-signup/LogoTitle";

type Props = {
  setOpenInvoiceModal: React.Dispatch<React.SetStateAction<boolean>>;
  setImageSrc: React.Dispatch<React.SetStateAction<string[]>>;
  imageSrc: string[];
  setFiles: React.Dispatch<React.SetStateAction<File[]>>;
  files: File[];
};
const AddInvoice = ({
  setOpenInvoiceModal,
  imageSrc,
  setImageSrc,
  setFiles,
  files,
}: Props) => {
  const { locale } = useCurrentLanguage();

  const { data, isLoading, mutate } = uploadInvoice();

  useEffect(() => {
    if (!data?.errors && data) {
      setOpenInvoiceModal(false);
      setFiles([]);
      toast({
        title: "success",
        description: locale?.["files_saved_successfully"],
        className: "bg-green-700 text-white rounded-xl",
      });
    }
  }, [data]);
  return (
    <div className="flex flex-col justify-center items-center gap-y-8 py-8">
      <LogoTitle title="add_invoice" />
      <DragDropImage
        imageSrc={imageSrc}
        setImageSrc={setImageSrc}
        setFiles={setFiles}
        files={files}
      />
      {files?.length > 0 && (
      <MainButton
        intent={isLoading ? "loading" : "outline"}
        size="sm"
        onClick={() => {
          setOpenInvoiceModal(false);
        }}
        
        className={`${
          !files?.length &&
          "bg-slate-400 text-white border-none hover:bg-slate-400"
        }`}
      >
        <TranslateClient text="upload_file" />
      </MainButton>
      )}
      
    </div>
  );
};

export default AddInvoice;