"use client";
import { useDmStore } from "@/app/store";
import {
  SelectBox,
  type SelectDataType,
} from "@common/business_components/ui";
import { Button, Label } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import SearchInputText from "../SearchInputText/SearchInputText";

export function SearchBar({
  setHasuPk,
  onApply,
}: {
  setHasuPk: (hasuPk: any) => void;
  onApply: () => void;
}) {
  const { map, Common, initializeCommonData, findRuseFclt } = useDmStore(
    (state) => state
  );
  const [sidoValue, setSidoValue] = useState<string>("");
  const [sigunValue, setSigunValue] = useState<string>("");
  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([
    { text: "전체", val: "0" },
  ]);

  useEffect(() => {
    initializeCommonData();
  }, [initializeCommonData]);

  const initializeSigunData = useCallback(
    (sidoCd: string) => {
      if (sidoCd === "0") {
        setSigunValue("0");
        setFilteredSigunData([{ text: "전체", val: "0" }]);
      } else {
        const newFilteredData = [
          { text: "전체", val: "0" },
          ...Common.selectSigunData.filter(
            (item: SelectDataType) => item.val.substring(0, 2) === sidoCd
          ),
        ];
        setSigunValue("0");
        setFilteredSigunData(newFilteredData);
      }
    },
    [Common.selectSigunData]
  );

  const onSelectValue = useCallback(
    (val: string, type: string) => {
      switch (type) {
        case "ctpvCd":
          initializeSigunData(val);
          setSidoValue(val);
          break;
        case "sggCd":
          setSigunValue(val);
      }
    },
    [initializeSigunData]
  );

  return (
    <div className="flex justify-center w-full px-4 py-3">
      <div className="flex items-center w-full max-w-screen-lg rounded-xl bg-white shadow-md px-6 py-4 space-x-3">
        <SelectBox
          labelClass="w-[40px]"
          className="w-[200px]"
          label="시도"
          selectClass="rounded-lg bg-white"
          selectArray={Common.selectSidoData || []}
          onSelectValue={(val) => onSelectValue(val.toString(), "ctpvCd")}
          value={sidoValue || Common.selectSidoData[0]?.val || ""}
        />
        <SelectBox
          labelClass="w-[65px]"
          className="w-[200px]"
          label="시군구"
          selectClass="rounded-lg bg-white"
          selectArray={filteredSigunData || []}
          onSelectValue={(val) => onSelectValue(val.toString(), "sggCd")}
          value={sigunValue}
        />
        <Label className="text-gray-600">하수재이용시설</Label>
        <SearchInputText
          label="시설명"
          initValue={undefined}
          setValue={(searchNm?: string) => {
            let sggOrCity = "";
            if (searchNm) {
              if (sigunValue === "0" || sigunValue === "") {
                sggOrCity = sidoValue;
              } else {
                sggOrCity = sigunValue;
              }
              findRuseFclt(sggOrCity, searchNm);
            }
          }}
          setRtnData={(rtnData: any) => {
            setHasuPk(rtnData);
          }}
          searchList={map.ruseFcltList || []}
        />
        <Button
          color="sky"
          className="ml-2 text-white"
          size="sm"
          onClick={() => {
            onApply();
          }}
        >
          적용
        </Button>
      </div>
    </div>
  );
}