frontend/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx

import { excelToPbnPrfData } from "@/app/store/prfmncReg/pbnstPrfmncReg/excel";
import { pbnPrfRegExcelZod } from "@/app/store/prfmncReg/pbnstPrfmncReg/headList";
import type {
  FcPrfType,
  PrfType,
} from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
import { yearOptions } from "@/components/lib/func/commom";
import {
  FormField,
  FormUi,
  SelectBox,
  Form,
  Title,
  filePicked,
} from "@common/business_components/ui";
import { Button, Input } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";
import type { z } from "zod";

export default function PbnPrfExcelModal({
  data,
  setIsExcelOPen,
  setModalExcelData,
}: {
  data: FcPrfType;
  setIsExcelOPen: (open: boolean) => void;
  setModalExcelData: (excelData: PrfType) => void;
}) {
  const [file, setFile] = useState<File | null>(null);
  const [excelData, setExcelData] = useState<PrfType[]>();
  const form = useForm<z.infer<typeof pbnPrfRegExcelZod>>({
    resolver: zodResolver(pbnPrfRegExcelZod),
    defaultValues: {
      ym: String(new Date().getFullYear()),
    },
  });

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      setFile(selectedFile);
    }
  };
  const onSubmit = (values: z.infer<typeof pbnPrfRegExcelZod>) => {
    if (excelData) {
      ////TODO: 궅이 서브밋을 써야하는 이유가 있는지 ?
      console.log("values ", values);
      //  prfmnRegData(1,'41',   excelData as unknown as PrfType); 활성화시 스토어 활성화 칠요

      setModalExcelData(excelData as unknown as PrfType);
      setIsExcelOPen(false);
    }
  };
  useEffect(() => {
    if (data && data.bscFctNm)
      form.setValue("pbnstRuseFcltId", data.pbnstRuseFcltId);
    form.setValue("bscFctNm", data.bscFctNm || "");
    form.setValue("pbnstRuseFcltNm", data.ruseUtztnFcltNm);
  }, [data]);

  useEffect(() => {
    if (file) {
      const isFile = file;
      if (form.getValues("ym").length < 1) {
        toast.error("파일업로드 이전에 등록년도를 작성해주세요 ");
        setFile(null);
        return;
      }

      if (isFile) {
        filePicked(isFile, 0).then((res) => {
          if (res !== undefined)
            setExcelData(
              excelToPbnPrfData(
                res as unknown as JSON[],
                form.getValues("ym"),
                form.getValues("pbnstRuseFcltId")
              ) as PrfType[]
            );
        });
      }
    }
  }, [file]);

  return (
    <>
      <div>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <div className="flex justify-between items-center">
              <Title title={"하수재이용 실적등록"}></Title>
              <Button className="mr-6 mt-10" type="submit">
                저장
              </Button>
            </div>
            <h3 className="text-2xl font-bold text-gray-900 my-3 ml-7">
              {"점검정보 입력"}
            </h3>

            <div className="mx-7">
              <FormField
                control={form.control}
                name="ym"
                render={({ field }) => (
                  <FormUi label="등록년도">
                    <SelectBox
                      className="w-1/2 pr-4 text-3xl"
                      selectClass={""}
                      label=""
                      selectArray={yearOptions}
                      value={field.value || new Date().getFullYear()}
                      onSelectValue={(val) => field.onChange(val)}
                    />
                  </FormUi>
                )}
              />
              <div className="flex gap-4 mt-4">
                <div className="flex-1">
                  <FormField
                    control={form.control}
                    name="bscFctNm"
                    render={({ field }) => (
                      <FormUi label="시설명">
                        <Input
                          className="text-3xl"
                          value={field.value || ""}
                          onChange={field.onChange}
                          readOnly
                        />
                      </FormUi>
                    )}
                  />
                </div>
                <div className="flex-1">
                  <FormField
                    control={form.control}
                    name="pbnstRuseFcltNm"
                    render={({ field }) => (
                      <FormUi label="재이용시설명">
                        <Input
                          className="flex-1 text-3xl"
                          value={field.value || ""}
                          onChange={field.onChange}
                          readOnly
                        />
                      </FormUi>
                    )}
                  />
                </div>
              </div>
              <div className="mt-4">
                <FormField
                  control={form.control}
                  name="file"
                  render={({ field }) => (
                    <FormUi label="점검결과 파일">
                      {/* <FileUpload
                        files={files || []}
                        setFiles={(files: File[] | null) => {
                          if (files) setFiles(files);
                        }}
                        fileTypes="xlsx"
                        maxFiles={1}


                        
                      ></FileUpload> */}

                      <div className="space-y-4 p-4">
                        <Input
                          type="file"
                          onChange={(file) => {
                            console.log(" field. valus", field.value);
                            if (file) handleFileChange(file);
                          }}
                          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                        />
                      </div>
                    </FormUi>
                  )}
                />
              </div>
            </div>
          </form>
        </Form>
      </div>
    </>
  );
}