frontend/apps/wr/app/matMng/coMng/ldrmntCoSttn/page.tsx

"use client";

import { useWrStore } from "@/app/store";
import { btnClass } from "@/app/store/common/code";
import { type customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
import { ldrmntHeadListExport } from "@/app/store/matDmd/ldrmntCoSttn/headList";
import {
  confirmToast,
  excelDownload,
  getCity,
  tableData
} from "@/components/lib/func/commom";
import CoRegExcel from "@/components/ui/modal/coReg/coRegExcel/coRegExcelModal";
import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal";
import {
  ContentsDiv,
  downloadExcel,
  SearchDiv,
  SearchFormLeft,
  SearchFormRight,
  SearchInput,
  SelectBox,
  Title,
  UiModal,
  UiTable,
  type SelectDataType
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Button } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import { useTranslation } from "react-i18next";

export default function LdrmntCoSttn() {
  const { code, ldrmnt, ldrmntInit, ldrmntSearch, ldrmntUpdate } = useWrStore(
    (state) => state
  );
  const { ldrmntRes, excelList, ldrmntResCount } = ldrmnt;
  const [detailModal, setDetailModal] = useState<{ isOpen: boolean, data: customLdrmnt | undefined }>({ data: undefined, isOpen: false })
  const [pageNation, setPageNation] = useState(1);
  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
  const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
  const [bdstTable, setBdstTable] = useState<customLdrmnt[]>();
  const [searchTxt, setSearchTxt] = useState<string>();
  const [excelData, setExcelData] = useState<any[]>();
  const [resetPage, isResetPage] = useState(false);
  const { t } = useTranslation('base');

  const excelClick = useCallback(() => {
    excelDownload(
      [[]],
      "잠재수요처 등록양식",
      "sample_ldrmntCoSttn.xlsx",
      "A1:AL1",
      2
    );
  }, []);

  const computeCityNm = () => {
    let cityTxt = "";
    let sggTxt = "";

    if (objSearch.city) {
      cityTxt =
        code.cityCd.find((c) => c.val === objSearch.city)?.text || "";
    }
    if (objSearch.sgg) {
      sggTxt =
        code.sggCd.find((s) => s.val === objSearch.sgg)?.text || "";
    }

    if (cityTxt === "" || cityTxt === "전체") cityTxt = "0";

    return sggTxt && sggTxt !== "0"
      ? `${cityTxt} ${sggTxt}`
      : cityTxt;
  };

  const excelDownloadClick = useCallback(() => {
    const cityNm = computeCityNm();
    ldrmntSearch(true, 1, String(ldrmntResCount), cityNm, searchTxt || "");
  }, [objSearch, searchTxt, code, ldrmntSearch, computeCityNm, ldrmntResCount]);

  useEffect(() => {
    if (excelData && excelData.length > 0) {
      downloadExcel({
        data: excelData,
        fileName: "잠재수요처 관리",
        sheetNameArray: ["Sheet1"],
        headerRange: "A1:F1"
      });
    } else {
      toast.error(t('excelDownErrMsg'));
    }
  }, [excelData]);

  const [isExcelOpen, setIsExcelOpen] = useState<{
    isModal: boolean;
  }>({ isModal: false });

  const cellClick = (index: number | undefined) => {
    if (index !== undefined) {
      setDetailModal({ isOpen: true, data: ldrmntRes[index] });
    }
  }

  const getSelCity = (val: string | number) => {
    const cityValue = String(val);

    if (cityValue === "0") {
      setSelectSgg([]);
      setObjSearch({ city: cityValue, sgg: "" });
    } else {
      const data = getCity(cityValue, code.sggCd);
      setSelectSgg(data);
      const firstSggVal = data.find(item => item.val === "0")?.val || (data[0]?.val ?? "");
      setObjSearch({ city: cityValue, sgg: firstSggVal });
    }
  };

  const getSgg = (val: string | number) => {
    setObjSearch({ ...objSearch, sgg: String(val) })
  };

  useEffect(() => {
    if (!ldrmnt.isInit) {
      ldrmntInit("0");
    }
  }, [ldrmnt.isInit, ldrmntInit]);

  useEffect(() => {
    const transData = Array.isArray(ldrmntRes) ? ldrmntRes : [ldrmntRes];
    const data = tableData(transData, { code });
    const tbData = Array.isArray(data)
      ? data.map((item: customLdrmnt) => ({
        ...item,
        ctpvCd: item.fctryAddr?.split(" ")[0] || "",
        sggCd: item.fctryAddr?.split(" ")[1] || ""

      }))
      : [];

    setBdstTable(tbData);
  }, [ldrmntRes, code]);

  useEffect(() => {
    const transData = Array.isArray(excelList) ? excelList : [excelList];
    const exData = tableData(transData, { code });
    const data = Array.isArray(exData)
      ? exData.map((item: customLdrmnt) => {
        return {
          "시도": item.fctryAddr?.split(" ")[0] || "",
          "시군구": item.fctryAddr?.split(" ")[1] || "",
          "회사명": item.dmdCoNm,
          "공장주소": item.fctryAddr,
          "공장관리번호": item.fctryMngNo,
          "전화번호": item.telno
        }
      }) : [];
    setExcelData(data)
  }, [excelList])

  useEffect(() => {
    ldrmntSearch(false, pageNation, '20', computeCityNm(), searchTxt || "");
    isResetPage(false)
  }, [pageNation]);

  return (
    <>
      <ContentsDiv>
        <div className="grid grid-cols-4 gap-4 ">
          <div className="col-span-4">
            <Title title={"잠재수요처 관리"} />
            <SearchDiv>
              <SearchFormLeft>
                <div className="col-span-10 flex flex-row">
                  <SelectBox
                    className="col-span-2 w-1/6 h-full text-2xl"
                    label="시도"
                    selectClass={""}
                    selectArray={code.cityCd}
                    onSelectValue={getSelCity}
                  />
                  <SelectBox
                    className="col-span-2 w-1/6 h-full text-2xl ml-4"
                    label="시군구"
                    selectClass={""}
                    selectArray={selectSgg || []}
                    value={objSearch.sgg} // value props 추가
                    onSelectValue={getSgg}
                  />
                  <SearchInput
                    className={"text-2xl ml-4"}
                    label="회사명"
                    textValue={searchTxt || ""}
                    setText={(e) => {
                      setSearchTxt(e);
                    }}
                  />
                </div>
              </SearchFormLeft>
              <SearchFormRight
                className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
                <div className="flex flex-row space-x-2 items-center">
                  <Button
                    size={"sm"}
                    onClick={() => {
                      ldrmntSearch(false, pageNation, '20', computeCityNm(), searchTxt || "");
                      isResetPage(true)
                    }}
                  >
                    조회
                  </Button>
                  <Button
                    size={"sm"}
                    className={btnClass}
                    onClick={() => {
                      setIsExcelOpen({ isModal: true });
                    }}
                  >
                    엑셀등록
                  </Button>
                  <Button
                    size={"sm"}
                    className={btnClass}
                    onClick={() => excelDownloadClick()}
                  >
                    다운로드
                  </Button>
                  <Button
                    size={"sm"}
                    className={`${btnClass} green`}
                    onClick={excelClick}
                  >
                    양식받기
                  </Button>
                </div>
              </SearchFormRight>
            </SearchDiv>
          </div>
        </div>
        <div className="grid grid-cols-6 gap-4 ">
          <div className="col-span-6">
            <div className="overflow-x-auto">
              <ListDiv className="min-w-max">
                <UiTable
                  headName={undefined}
                  tableData={bdstTable || []}
                  headlist={ldrmntHeadListExport}
                  pageSize={20}
                  total={ldrmntResCount || 0}
                  cellClick={(index: number | undefined) => { cellClick(index ?? undefined) }}
                  onPageChange={setPageNation}
                  resetPageNo={resetPage}
                />
              </ListDiv>
            </div>
          </div>
          <UiModal
            open={detailModal.isOpen}
            onOpenChange={() => {
              setDetailModal({ ...detailModal, isOpen: !detailModal.isOpen })
            }}
            bodyClass={"w-[40vw] max-w-none max-h-[calc(100%-70px)]"}
            body={<CoDetailModal formObj={detailModal.data} onFormSubmit={async (value) => {
              // confirmToast(t('isUpdateMsg'), await ldrmntUpdate(value))
              // // await ldrmntUpdate(value)
              // setDetailModal({ ...detailModal, isOpen: false })
              // ldrmntSearch(false, pageNation, '20', computeCityNm(), searchTxt || "");
              const handleConfirm = async () => {
                await ldrmntUpdate(value);
                setDetailModal({ ...detailModal, isOpen: false });
                ldrmntSearch(false, pageNation, '20', computeCityNm(), searchTxt || "");
              };
              confirmToast(t('isUpdateMsg'), handleConfirm);
            }} />}
          />

          <UiModal
            open={isExcelOpen.isModal}
            onOpenChange={() => {
              setIsExcelOpen({ isModal: !isExcelOpen.isModal })
            }}
            bodyClass={"w-[40vw] max-w-none"}
            body={<CoRegExcel isModal={(isOpen) => setIsExcelOpen({ isModal: isOpen })} />}
          />
          <Toaster position="top-center"></Toaster>

        </div>

      </ContentsDiv>
    </>

  )

}