"use client";

import { useWrStore } from "@/app/store";
import type {
  conCostFeeType,
  ContCostMap,
} from "@/app/store/common/searchCode/type";
import { UiTable } from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Label, } from "@common/components/ui";
import { useEffect, useState } from "react";
export function ConstCostFeeTable() {
  const { coRvw, constCostRes } = useWrStore((state) => state);

  const [constCostData, setConstCostData] = useState<ContCostMap[]>([]);


  const getFctDescription = (fctCd: string) => {
    const fctMap: { [key: string]: string } = {
      "001": "총인처리시설",
      "002": "염소소독",
      "003": "UV소독",
      "004": "전처리시설",
      "005": "RO",
    };

    return fctMap[fctCd];
  }
  useEffect(() => {
    const tableData = constCostRes?.reduce(
      (acc: ContCostMap[], cur: conCostFeeType) => {
        const key = cur.fctCd;
        let target = acc?.find((item: any) => item.gubun === key);
        if (!target) {
          target = {
            gubun: cur.fctCd,
            "500": 0,
            "1000": 0,
            "2000": 0,
            "3000": 0,
            "5000": 0,
            "10000": 0,
            "20000": 0,
            "30000": 0,
            "50000": 0,
            "100000": 0,
          };
          acc?.push(target);
        }
        target[cur.fctCpc] = cur.stdCost;

        return acc;
      },
      []
    );
    const formattedTableData = tableData?.map((item: ContCostMap) => {
      return {
        ...item,
        gubun: getFctDescription(item.gubun) || item.gubun,
      };
    });
    setConstCostData(formattedTableData);
  }, [constCostRes]);

  return (
    <>
      <ListDiv className="h-[calc(100vh-60vh)] overflow-auto">
        <h3 className="mt-4 ml-2 text-2xl font-medium text-label">
          공사비 산정표 보기
        </h3>
        <hr />
        <div className="col-span-5 flex items-center">
          <Label className="ml-2 mr-1 text-xl text-gray-600">기준년도</Label>
          <span>{new Date().getFullYear() || ""}</span>
        </div>
        <UiTable
          headName={""}
          tableData={constCostData || []}
          headlist={coRvw.constCostHeadList}
          pageSize={0}
          total={0}
          cellClick={undefined}
          onPageChange={() => { }}
        />
      </ListDiv>
    </>
  );
}