/**
 * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭
 *
 * 📄 BasicTab Component
 * Next.js App Router (app/) 기반 검색 모달의 기본정보 탭 컴포넌트
 *
 * - 기본정보 검색을 위한 구분 선택 및 조건 입력 UI 제공
 * - 하수관로, 하수처리시설, 하수처리구역, 하수맨홀, 하수펌프장, 우수토실 등 다양한 유형별 컴포넌트 렌더링
 * - useSearchModalStore를 통해 상태 관리 및 사용자 상호작용 처리
 */
import React from "react";
import { SelectBox } from "@common/business_components/ui/select";
import { Label } from "@common/components";
import SwagePpl from "./swagePpl";
import SwagePrcsFclt from "./swagePrcsFclt";
import SwagePrcsZone from "./swagePrcsZone";
import FldngWtlvMap from "./fldngWtlvMap";
import SwageMhl from "./swageMhl";
import SwagePmstn from "./swagePmstn";
import Stofcbr from "./stofcbr";
import useSearchModalStore from "@/store/useSearchModalStore";
import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";

// 기본정보 '구분' 선택 목록
export const BASIC_TYPES = [
  { val: "tb_ms_swage_ppl", text: "하수관로" },
  { val: "tb_il_swage_prcs_fclt", text: "하수처리시설" },
  { val: "tb_ms_swage_prcs_zone", text: "하수처리구역" },
  { val: "tb_ms_fldng_wtlv_map", text: "침수흔적위선" },
  { val: "tb_ms_fldng_dpth_map", text: "침수흔적심선" },
  { val: "tb_ms_swage_mhl", text: "하수맨홀" },
  { val: "tb_ms_swage_pmstn", text: "하수펌프장" },
  { val: "tb_ms_stofcbr", text: "우수토실" },
];

const BasicTab: React.FC = () => {
  const { basicType, setBasicType } = useSearchModalStore();

  return (
    <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-4 gap-y-3">
      {/* 구분과 세부 조회조건은 하나의 검색 행으로 이어서 배치한다. */}
      <div className="flex shrink-0 items-center">
        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">
          구분
        </Label>
        <SelectBox
          className="mr-3 w-[150px]"
          selectClass="rounded-lg bg-field text-foreground"
          label=""
          selectArray={BASIC_TYPES}
          onSelectValue={(value: string | number) =>
            setBasicType(String(value))
          }
          value={basicType}
          selectContentClass="z-[101]"
        />
      </div>
      <div className="min-w-0 flex-[1_1_60rem]">
        {basicType === "tb_ms_swage_ppl" && <SwagePpl />} {/* 하수관로 */}
        {basicType === "tb_il_swage_prcs_fclt" && <SwagePrcsFclt />}{" "}
        {/** 하수처리시설 */}
        {basicType === "tb_ms_swage_prcs_zone" && <SwagePrcsZone />}{" "}
        {/** 하수처리구역 */}
        {basicType === "tb_ms_fldng_wtlv_map" && <FldngWtlvMap />}{" "}
        {/** 침수흔적도 */}
        {basicType === "tb_ms_swage_mhl" && <SwageMhl />} {/* 하수맨홀 */}
        {basicType === "tb_ms_swage_pmstn" && <SwagePmstn />} {/* 하수펌프장 */}
        {basicType === "tb_ms_stofcbr" && <Stofcbr />} {/* 우수토실 */}
      </div>
    </PopupSearchPanel>
  );
};

export default React.memo(BasicTab);