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

/**
 * 재이용실적등록> 하수재이용 실적등록 파일등록 modal
 */
import { excelToPbnPrfData } from "@/app/store/prfmncReg/pbnstPrfmncReg/excel";
import { pbnPrfRegExcelZod } from "@/app/store/prfmncReg/pbnstPrfmncReg/headList";
import type {
  PbnstPrfRegDtlType,
  PrfType,
} from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
import { yearOptions } from "@/components/lib/func/common";
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, useRef, useState } from "react";
import { useForm } from "react-hook-form";
// import toast from "react-hot-toast";
import type { z } from "zod";
import { useAlertStore } from "@/src/shared/lib";

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

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setExcelData(undefined);
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      setFile(selectedFile);
    }
  };
  const onSubmit = (values: z.infer<typeof pbnPrfRegExcelZod>) => {
    if (!file) {
      alert("엑셀 파일을 선택해 주세요.");
      return;
    }

    if (!excelData || excelData.length === 0) {
      alert("엑셀 파일을 먼저 확인해 주세요.");
      return;
    }

    ////TODO: 궅이 서브밋을 써야하는 이유가 있는지 ?
    console.log("values ", values);
    setModalExcelData(excelData);
    setIsExcelOPen(false);
  };
  useEffect(() => {
    form.setValue("pbnstRuseFcltId", data.pbnstRuseFcltId || "");
    form.setValue("bscFctNm", data.swageBscFctNm || "");
    form.setValue("pbnstRuseFcltNm", data.ruseUtztnFcltNm || "");
  }, [data]);

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

      if (!form.getValues("pbnstRuseFcltId")) {
        alert("재이용시설을 다시 선택한 뒤 파일등록을 진행해 주세요.");
        setFile(null);
        if (fileInputRef.current) {
          fileInputRef.current.value = "";
        }
        return;
      }

      if (isFile) {
        filePicked(isFile, 0).then((res) => {
          if (res === undefined) {
            alert("엑셀 파일을 읽지 못했습니다.");
            return;
          }

          const parsedData = excelToPbnPrfData(
            res as unknown as JSON[],
            form.getValues("ym"),
            form.getValues("pbnstRuseFcltId")
          ) as PrfType[];

          if (!parsedData.length) {
            alert("업로드 가능한 실적 데이터가 없습니다. 양식을 확인해 주세요.");
            if (fileInputRef.current) {
              fileInputRef.current.value = "";
            }
            setFile(null);
            return;
          }

          setExcelData(parsedData);
        });
      }
    }
  }, [alert, file, form]);

  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="my-3 ml-7 text-2xl font-bold text-foreground">
              {"점검정보 입력"}
            </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
                          ref={fileInputRef}
                          type="file"
                          onChange={(event) => {
                            console.log(" field. valus", field.value);
                            handleFileChange(event);
                          }}
                          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                        />
                      </div>
                    </FormUi>
                  )}
                />
              </div>
            </div>
          </form>
        </Form>
      </div>
    </>
  );
}