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


// 기본정보 '구분' 선택 목록
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_swage_mhl", text: "하수맨홀" },
  { val: "tb_ms_swage_pmstn", text: "하수펌프장" },
  { val: "tb_ms_stofcbr", text: "우수토실" },
];

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

  return (
    <div className="relative border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
      {/* 구분 */}
      <div className="mb-3 flex items-center justify-between gap-4">
        <div className="flex items-center">
          <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
          <SelectBox
            className="w-[150px] mr-3"
            selectClass="rounded-lg bg-white"
            label=""
            selectArray={BASIC_TYPES}
            onSelectValue={(value: string | number) =>
              setBasicType(String(value))
            }
            value={basicType}
            selectContentClass="z-[101]"
          />
        </div>
      </div>
      {/* 조회 조건 */}
      {basicType === "tb_ms_swage_ppl" && (<SwagePpl />)}  {/* 하수관로 */}
      {basicType === "tb_il_swage_prcs_fclt" && (<SwagePrcsFclt />)} {/* 하수처리시설 */}
      {basicType === "tb_ms_swage_prcs_zone" && (<SwagePrcsZone />)} {/* 하수처리구역 */}
      {basicType === "tb_ms_swage_mhl" && (<SwageMhl />)}  {/* 하수맨홀 */}
      {basicType === "tb_ms_swage_pmstn" && (<SwagePmstn />)}  {/* 하수펌프장 */}
      {basicType === "tb_ms_stofcbr" && (<Stofcbr />)} {/* 우수토실 */}
    </div>
  );
};

export default React.memo(BasicTab);