frontend/apps/wr/app/map/mapSearchBar.tsx

"use client"

import { Button } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import type { EnvPartSelectDataType } from "@common/business_components/ui/search_form_left";
import { SearchFormRight } from "@common/business_components/ui/search_form_right";
import type { SelectDataType } from "@common/business_components/ui/search_input_select";
import type { ReturnType } from "@common/business_components/ui/search_base_form";
import { MapSearchForm } from "./mapSearchForm";

type SearchBaseType = {
  selectSidoData?: SelectDataType[] | [];
  selectSigunData?: SelectDataType[] | [];
  selectRegionData?: SelectDataType[] | [];
  selectUnitWaterShedData?: SelectDataType[] | [];
  selectMiddleRegionData?: SelectDataType[] | [];
  selectEnvPartData?: EnvPartSelectDataType[] | [];
  queryClick: (returnType: ReturnType) => void;
  excelName?: string;
  excelClick: (returnType: ReturnType) => void;
  initClick: () => void;
  btnClass: string;
  ref: React.RefObject<ReturnType>;
  isAdmin: boolean;
  leftClassName?: string;
  rightClassName?: string;
  showQueryButton?: boolean;
  showInitButton?: boolean;
  showApplyButton?: boolean;
}

export function MapSearchBar({
  selectSidoData,
  selectSigunData,
  selectRegionData,
  selectUnitWaterShedData,
  selectMiddleRegionData,
  selectEnvPartData,
  btnClass,
  excelName,
  queryClick,
  excelClick,
  initClick,
  ref,
  isAdmin = false,
  leftClassName,
  rightClassName,
  showQueryButton = true,
  showInitButton = true,
  showApplyButton = false
}: SearchBaseType) {
  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 [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0");
  const [middleRegionValue, setMiddleRegionValue] = useState<string>("0");
  const [envPartValue, setEnvPartValue] = useState<string>("0");
  const [resetTrigger, setResetTrigger] = useState(false);

  const queryVal = () => {
    console.log("조회버튼 클릭");
    queryClick({
      partValue: partValue,
      sidoValue: sidoValue,
      sigunValue: sigunValue,
      regionValue: regionValue,
      unitWaterShedValue: untitWaterShedValue,
      middleRegionValue: middleRegionValue,
      envPartValue: envPartValue,
      sidoText: sidoText,
      sigunText: sigunText,
    });
  }

  const initVal = useCallback(() => {
    setResetTrigger(true);
    initClick();
  }, [setResetTrigger, initClick]);

  useEffect(() => {
    if (resetTrigger) {
      setResetTrigger(false);
    }
  }, [resetTrigger]);

  const excelDownload = () => {
    excelClick({
      partValue: partValue,
      sidoValue: sidoValue,
      sigunValue: sigunValue,
      regionValue: regionValue,
      unitWaterShedValue: untitWaterShedValue,
      middleRegionValue: middleRegionValue,
      envPartValue: envPartValue,
      sidoText: sidoText,
      sigunText: sigunText,
    })
  };

  useEffect(() => {
    if (ref && ref.current) {
      const customRef = ref.current;
      customRef.partValue = partValue;
      customRef.sidoValue = sidoValue;
      customRef.sigunValue = sigunValue;
      customRef.regionValue = regionValue;
      customRef.unitWaterShedValue = untitWaterShedValue;
      customRef.middleRegionValue = middleRegionValue;
      customRef.envPartValue = envPartValue;
      customRef.sidoText = sidoText;
      customRef.sigunText = sigunText;
    }
  }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, sidoText, sigunText, ref]);
  
  return (
    <div className={leftClassName ? leftClassName : `w-auto min-w-[200px] mx-5 flex items-center justify-center space-x-2 `}>
      {/* 검색 조건 부분 */}
      <MapSearchForm
        isShowPart={true}
        selectSidoData={selectSidoData}
        selectSigunData={selectSigunData}
        selectRegionData={selectRegionData}
        selectUnitWaterShedData={selectUnitWaterShedData}
        selectMiddleRegionData={selectMiddleRegionData}
        selectEnvPartData={selectEnvPartData}
        setRtnPartValue={setPartValue}
        setRtnSidoValue={setSidoValue}
        setRtnSigunValue={setSigunValue}
        setRtnRegionValue={setRegionValue}
        setRtnUnitWaterShedValue={setUntitWaterShedValue}
        setRtnMiddleRegionValue={setMiddleRegionValue}
        setRtnEnvPartValue={setEnvPartValue}
        setRtnEnvPartSidoValue={setSidoValue}
        setRtnEnvPartSigunValue={setSigunValue}
        setRtnSidoText={setSidoText}
        setRtnSigunText={setSigunText}
        resetTrigger={resetTrigger}
        isAdmin={isAdmin}
        children={undefined}
      />
      {/* 버튼 부분 */}
      <div className={rightClassName ? rightClassName : `w-1/12 mx-5 flex flex-col items-center justify-center space-x-2 `}>
        <div className="flex items-center justify-between gap-2">
          {showQueryButton && <Button className={btnClass} onClick={queryVal}>조회</Button>}
          {showInitButton && <Button className={btnClass} onClick={initVal}>초기화</Button>}
          {showApplyButton && <Button className={btnClass} onClick={initVal}>적용</Button>}
        </div>
      </div>
    </div>
  )
}