'use client'
import { VerticalTable } from '@/components/ui/verticalTable';
import React, { useState, useEffect } from 'react'
import InputSection from '../InputSection';
import { handleInputChange } from '../common';
import { getData } from "@/components/lib/api";
import useStore from '../../../../store/useStore';

// 하수관로
const inputColumn = [
  { id: "instlMbdyCd", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
  { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
  { id: "mltvZoneNm", title: "배수구역", type: "input" },
  { id: "mltvDtdvNm", title: "배수분구", type: "input" },
  { id: "lineCd", title: "지선/간선", type: "select", options: ["지선", "간선"] },
  { id: "floCd", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
  { id: "layCd", title: "매설위치", type: "select", options: ["도로", "하상"] },
];

type operationDataType = { year: string; type: string, bizInfoNm: string, bizType: string };

const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: () => void }) => {
  const [formData, setFormData] = useState<any>({});
  const [repairData, setRepairData] = useState<operationDataType[]>([]);
  const [cleaningData, setCleaningData] = useState<operationDataType[]>([]);
  const [inspectionData, setInspectionData] = useState<operationDataType[]>([]);
  const dataMap = {
    repair: { data: repairData, setData: setRepairData },
    cleaning: { data: cleaningData, setData: setCleaningData },
    inspection: { data: inspectionData, setData: setInspectionData },
  };

  const { BIZ_SE_CD, BIZ_TY_CD } = useStore();

  // 마운트 및 업데이트 시 API 호출

  useEffect(() => {
    if (featureData) {
      setFormData(featureData);
    }

    const fetchAll = async () => {
      const operationData = await getData(`v1/bizInfo/bizByFclt?mngInstCd=${featureData?.mng_inst_cd}&fcltMngNo=${featureData?.fclt_mng_no}&page=0&size=1`);

      let inspectionArr: operationDataType[] = [];
      let cleaningArr: operationDataType[] = [];
      let repairArr: operationDataType[] = [];

      if (Array.isArray(operationData)) {
        operationData.forEach(item => {
          if (!item.flfmt_yr) return;
          // biz_se_cd에 해당하는 type명 찾기
          const seCodeObj = BIZ_SE_CD.find(code => code.lwpoCd === item.biz_se_cd);
          const tyCodeObj = BIZ_TY_CD.find(code => code.lwpoCd === item.biz_ty_cd);
          const seTypeName = seCodeObj ? seCodeObj.lwpoCdNm : "";
          const tyTypeName = tyCodeObj ? tyCodeObj.lwpoCdNm : "";
          switch (item.biz_se_cd) {
            case "100":
              inspectionArr.push({
                year: String(item.flfmt_yr),
                type: seTypeName,
                bizInfoNm: String(item.biz_info_nm),
                bizType: tyTypeName,
              });
              break;
            case "203":
              cleaningArr.push({
                year: String(item.flfmt_yr),
                type: seTypeName,
                bizInfoNm: String(item.biz_info_nm),
                bizType: tyTypeName,
              });
              break;
            case "200":
            case "201":
            case "204":
              repairArr.push({
                year: String(item.flfmt_yr),
                type: seTypeName,
                bizInfoNm: String(item.biz_info_nm),
                bizType: tyTypeName,
              });
              break;
          }
        });
      }

      setInspectionData(inspectionArr);
      setCleaningData(cleaningArr);
      setRepairData(repairArr);
      console.log('inspectionArr', inspectionArr);
      console.log('cleaningArr', cleaningArr);
      console.log('repairArr', repairArr);
    };
    fetchAll();
  }, [featureData]);

  // 폼 데이터가 변경될 때 호출될 핸들러
  const handleFormDataChange = (newFormData: any) => {
    setFormData(newFormData);
  };

  // 저장 버튼 클릭 시 최신 formData를 부모에게 전달
  const handleSaveClick = () => {
    if (onSaveClick) {
      // 저장 전에 formData를 부모 컴포넌트의 handleSaveClick에 전달
      onSaveClick();
    }
  };


  return (
    <>
      <VerticalTable
        headName='입력정보'
        tableData={featureData ? [formData] : []}
        headlist={inputColumn}
        pageSize={20}
        total={0}
        cellClick={undefined}
        isEditable={true}
        onPageChange={function (page: number): void {
          throw new Error("Function not implemented.");
        }}
        showSaveButton={true}
        onSaveClick={handleSaveClick}
        onFormDataChange={handleFormDataChange} // 폼 데이터 변경 콜백 추가
      />
      <InputSection
        title="보수 및 갱신"
        data={repairData}
        sectionKey="repair"
        onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)}
      />
      <InputSection
        title="청소 및 준설"
        data={cleaningData}
        sectionKey="cleaning"
        onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)}
      />
      <InputSection
        title="점검 및 진단"
        data={inspectionData}
        sectionKey="inspection"
        onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)}
      />
    </>
  )
}

export default MsSwagePpl