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

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

export default function PbnPrfExcelModal() {
  const { code, prfmnc, searchFclts } = useWrStore((state) => state);

  
  const [bscFctNmList, setBscFctNmList] = useState<SelectDataType[] | null>(null);
  const [files, setFiles] = useState<File[] | null>(null);
const [excelData, setExcelData] = useState<any[]>();
  const form = useForm<z.infer<typeof pbnPrfRegExcelZod>>({
    resolver: zodResolver(pbnPrfRegExcelZod),
    defaultValues: {
      ym: String(new Date().getFullYear()),
    },
  });
  const onSubmit = (values: z.infer<typeof pbnPrfRegExcelZod>) => {
    console.log(values);
  };
  useEffect(() => {
    
    if(prfmnc.prfmncRes.length > 0){

      const basFctNmList = prfmnc.prfmncRes.map((item)=>(
        {
          val:item.bscFctCd,
          text:item.bscFctNm
        }
      ))
      setBscFctNmList(basFctNmList)
    }

  }, [prfmnc.prfmncRes]);


  useEffect(()=>{

    if(files){

      const file = files[0];
      if (form.getValues("ym").length < 1) {
        ToastFormUi({
          body: "파일업로드 이전에 등록년도를 작성해주세요 ",
          title: "지도점검 등록",
        });
        setFiles(null);
        return;
      }

      if(file)
      filePicked(file, 0).then((res) => {
            if (res !== undefined)
              console.log(excelToPbnPrfData(res, form.getValues("ym")))
          });


    }
  },[files])

  return (
    <>
      <div>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <div>
              <Title title={"하수재이용 실적등록"}></Title>
            </div>
            <div className="flex justify-between">
              <h3 className="text-2xl font-bold text-gray-900 mt-1 ml-7">
                {"점검정보 입력"}
              </h3>

              <Button className="" type="submit">
                저장
              </Button>
            </div>

            <div>
              <FormField
                control={form.control}
                name="ym"
                render={({ field }) => (
                  <FormUi label="등록년도">
                    <SelectBox
                      className="w-1/4 text-3xl"
                      selectClass={""}
                      label=""
                      selectArray={yearOptions}
                      value={field.value}
                      onSelectValue={(val) => field.onChange(val)}
                    />
                  </FormUi>
                )}
              />

              <FormField
                control={form.control}
                name="bscFctNm"
                render={({ field }) => (
                  <FormUi label="시설명">
                    <SelectBox
                      className="w-1/4 text-3xl"
                      selectClass={""}
                      label=""
                      selectArray={bscFctNmList || [] }
                      value={field.value}
                      onSelectValue={(val) => field.onChange(String(val))}
                    />
                  </FormUi>
                )}
              />
              <FormField
                control={form.control}
                name="pbnstRuseFcltNm"
                render={({ field }) => (
                  <FormUi label="재이용시설명">
                    <SelectBox
                      className="w-1/4 text-3xl"
                      selectClass={""}
                      label=""
                      selectArray={yearOptions}
                      value={field.value}
                      onSelectValue={(val) => field.onChange(String(val))}
                    />
                  </FormUi>
                )}
              />

              <FormField
                control={form.control}
                name="file"
                render={({ field }) => (
                  <FormUi label="점검결과 파일">
                    <FileUpload
                      files={files || []}
                      setFiles={(files: File[] | null) => {
                        if (files) setFiles(files);
                      }}
                      fileTypes="xlsx"
                    ></FileUpload>
                  </FormUi>
                )}
              />
            </div>
          </form>
        </Form>
      </div>
    </>
  );
}