"use client"

import React, { useEffect, useState } from 'react';
import type { SelectDataType } from '@common/business_components/ui/search_input_select';
import { SelectBox } from '@common/business_components/ui/select';

/**
 * 검색 폼 왼쪽 컴포넌트 타입
 * 
 * @param isShowPart 구분 조회 여부
 * @param children 자식 컴포넌트
 * @param selectSidoData 시도 데이터
 * @param selectSigunData 시군구 데이터
 * @param selectRegionData 유역 데이터
 * @param selectUnitWaterShedData 단위유역 데이터
 * @param selectMiddleRegionData 중권역 데이터
 * @param selectEnvPartData 환경청 데이터
 * @param selectEnvPartSidoData 환경청 시도 데이터
 * @param selectEnvPartSigunData 환경청 시군구 데이터
 * @param setRtnPartValue 부분 값 변경 핸들러
 */
type SearchFormLeftProps = {
  isShowPart?: boolean | undefined;
  children: React.ReactNode;
  selectSidoData?: SelectDataType[] | [];
  selectSigunData?: SelectDataType[] | [];
  selectRegionData?: SelectDataType[] | [];
  selectUnitWaterShedData?: SelectDataType[] | [];
  selectMiddleRegionData?: SelectDataType[] | [];
  selectEnvPartData?: EnvPartSelectDataType[] | [];
  selectEnvPartSidoData?: SelectDataType[] | [];
  selectEnvPartSigunData?: SelectDataType[] | [];

  setRtnPartValue?: (value: string) => void;
  setRtnSidoValue?: (value: string) => void;
  setRtnSigunValue?: (value: string) => void;
  setRtnRegionValue?: (value: string) => void;
  setRtnUnitWaterShedValue?: (value: string) => void;
  setRtnMiddleRegionValue?: (value: string) => void;
  setRtnEnvPartValue?: (value: string) => void;
  setRtnEnvPartSidoValue?: (value: string) => void;
  setRtnEnvPartSigunValue?: (value: string) => void;
  setRtnSidoText?: (value: string) => void;
  setRtnSigunText?: (value: string) => void;
  resetTrigger?: boolean;
  isAdmin?: boolean;
}

export type EnvPartSelectDataType = SelectDataType & {
  adstDliStrCd: string,
}

const selectPartData: SelectDataType[] = [
  { text: "행정별", val: 'A' },
  { text: "유역별", val: 'R' },
  { text: "환경청별", val: 'G' },
];

function MapSearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false }: SearchFormLeftProps) {
  /******************선택된 데이터******************/
  const [partValue, setPartValue] = useState<string>('A');
  //행정별 시도 시군구
  const [sidoValue, setSidoValue] = useState<string>('0');
  const [sigunValue, setSigunValue] = useState<string>('0');
  const [sidoText, setSidoText] = useState<string>('');
  const [sigunText, setSigunText] = useState<string>('');
  //유역별
  const [regionValue, setRegionValue] = useState<string>('0');
  const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
  const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
  //환경청별 시도 시군구
  const [envPartValue, setEnvPartValue] = useState<string>('0');
  // 환경청
  const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);

  /****************** 셀렉트 리스트 데이터. ******************/
  // 조회된 조건에 맞는 시도 시군 유역
  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
  const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
  const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
  // 조회된 조건에 맞는 환경청 시도 시군
  const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
  const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
  const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);

  // 시군구 세팅
  const initializeSigunData = (sidoCd: string) => {
    if (sidoCd === '0') {
      setSigunValue('0');
      setFilteredSigunData([{ text: "전체", val: '0' }]);
    } else {
      const newFilteredData = [
        { text: "전체", val: '0' },
        ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
      ];
      setSigunValue('0');
      setFilteredSigunData(newFilteredData);
    }
  }

  // 단위유역 세팅
  const initializeUnitWaterShedData = (regionCd: string) => {
    if (regionCd === '0') {
      setUnitWaterShedValue('0');
      setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
    } else {
      const newFilteredData = [
        { text: "전체", val: '0' },
        ...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
      ];
      setUnitWaterShedValue('0');
      setFilteredUnitWaterShedData(newFilteredData);
    }
  }

  // 중권역 세팅
  const initializeMiddleRegionData = (unitWaterShedCd: string) => {
    if (unitWaterShedCd === '0') {
      setMiddleRegionValue('0');
      setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
    } else {
      const newFilteredData = [
        { text: "전체", val: '0' },
        ...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
      ];
      setMiddleRegionValue('0');
      setFilteredMiddleRegionData(newFilteredData);
    }
  }

  // 환경청 세팅 - 시도
  const initializeCityDataByEnvPartSido = (envPartCd: string) => {
    const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
    const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');

    // 시군구 데이터
    const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));

    // 환경청 시도 데이터
    const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
    const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
    setFilteredEnvPartSigunDataSelected(envSigunData);

    setFilteredEnvPartSidoData([
      { text: "전체", val: '0', adstDliStrCd: '' },
      ...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '' }))
    ]);
  }

  // 환경청 세팅 - 시군구
  const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
    const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
    setFilteredEnvPartSigunData([
      { text: "전체", val: '0' },
      ...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
    ]);
  }

  const onSelectValue = (val: string, type: string) => {
    let selectedSido;
    let selectedSigun;
    let selectedEnvPartSido;
    let selectedEnvPartSigun;

    switch (type) {
      case 'part':
        setPartValue(val);
        if (setRtnPartValue) {
          setRtnPartValue(val);
        }
        // 구분
        if (val == 'R') {
          initializeMiddleRegionData('0');
          initializeUnitWaterShedData('0');
        } else if (val == 'G') {
          setFilteredEnvPartData([
            { text: "전체", val: '0', adstDliStrCd: '' },
            ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
          ]);
          setEnvPartValue('0');
          initializeCityDataByEnvPartSido('0');
        } else {
          initializeSigunData('0');
          onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
        }

        // 다른 selectbox 전체로 초기화
        onSelectValue(selectSidoData[0]?.val || '0', 'sido');
        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
        break;
      case 'sido':
        setSidoValue(val);
        selectedSido = selectSidoData.find(item => item.val === val);
        setSidoText(selectedSido?.text || '');
        if (setRtnSidoValue) {
          setRtnSidoValue(val);
        }
        if (setRtnSidoText) {
          setRtnSidoText(selectedSido?.text || '');
        }
        initializeSigunData(val);
        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
        break;
      case 'sigun':
        if (setRtnSigunValue) {
          setRtnSigunValue(val);
        }
        setSigunValue(val);
        selectedSigun = filteredSigunData.find(item => item.val === val);
        if (setRtnSigunText) {
          setRtnSigunText(selectedSigun?.text || '');
        }
        setSigunText(selectedSigun?.text || '');
        break;

      // 유역 세팅
      case 'region':
        setRegionValue(val);
        if (setRtnRegionValue) {
          setRtnRegionValue(val);
        }
        initializeUnitWaterShedData(val);
        onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
        break;
      case 'unitWaterShed':
        setUnitWaterShedValue(val);
        if (setRtnUnitWaterShedValue) {
          setRtnUnitWaterShedValue(val);
        }
        initializeMiddleRegionData(val);
        onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
        break;
      case 'middleRegion':
        setMiddleRegionValue(val);
        if (setRtnMiddleRegionValue) {
          setRtnMiddleRegionValue(val);
        }
        break;

      // 환경청 세팅
      case 'envPart':
        setEnvPartValue(val);
        if (setRtnEnvPartValue) {
          setRtnEnvPartValue(val);
        }
        initializeCityDataByEnvPartSido(val);
        onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
        break;
      case 'envPartSido':
        setSidoValue(val);
        selectedEnvPartSido = filteredEnvPartSidoData.find(item => item.val === val);
        setSidoText(selectedEnvPartSido?.text || '');
        if (setRtnEnvPartSidoValue) {
          setRtnEnvPartSidoValue(val);
        }
        initializeCityDataByEnvPartSigun(val);
        onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
        break;
      case 'envPartSigun':
        setSigunValue(val);
        selectedEnvPartSigun = filteredEnvPartSigunData.find(item => item.val === val);
        setSigunText(selectedEnvPartSigun?.text || '');
        if (setRtnEnvPartSigunValue) {
          setRtnEnvPartSigunValue(val);
        }
        break;
    }
  }

  // 리셋 함수
  const resetAllValues = () => {
    setPartValue('A');
    setSidoValue('0');
    setSigunValue('0');
    setRegionValue('0');
    setUnitWaterShedValue('0');
    setMiddleRegionValue('0');
    setEnvPartValue('0');

    setFilteredSigunData([{ text: "전체", val: '0' }]);
    setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
    setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
    setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
    setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
    setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);

    if (setRtnPartValue) setRtnPartValue('A');
    if (setRtnSidoValue) setRtnSidoValue('0');
    if (setRtnSigunValue) setRtnSigunValue('0');
    if (setRtnRegionValue) setRtnRegionValue('0');
    if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
    if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
    if (setRtnEnvPartValue) setRtnEnvPartValue('0');
    if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
    if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
  };

  // 리셋 트리거 변경 감지
  useEffect(() => {
    if (resetTrigger) {
      resetAllValues();
      // 리셋 후 트리거를 false로 설정
      if (setRtnPartValue) {
        setRtnPartValue('0');
      }
    }
  }, [resetTrigger]);

  return (
    isShowPart ? (
      <div className="flex gap-5">
        <SelectBox className="w-auto whitespace-nowrap" label={'구분'} selectArray={isAdmin ? selectPartData.slice(0, 1) : selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={'w-32'} />
        {partValue === 'R' ? (
          <>
            <SelectBox className="w-auto whitespace-nowrap" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={'w-44'} />
            <SelectBox className="w-auto whitespace-nowrap" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={'w-44'} />
            <SelectBox className="w-auto whitespace-nowrap" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={'w-44'} />
          </>
        ) : partValue === 'G' ? (
          <>
            <SelectBox className="w-auto whitespace-nowrap" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'w-44'} />
            <SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={'w-44'} />
            <SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={'w-44'} />
          </>
        ) : (
          <>
            <SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={'w-44'} />
            <SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={'w-44'} />
          </>
        )}
      </div>
    ) : (
      <div className="grid grid-cols-12 gap-5 w-11/12 m-4">
        {children}
      </div>
    )
  )
}

export { MapSearchFormLeft };