/**
 * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 유지관리 정보 탭
 * 
 * 📄 Operation Tab
 * Next.js App Router (app/) 기반 검색 모달 유지관리 정보 탭 컴포넌트
 *
 * - 업무구분 선택 (보수 및 갱신, 점검 및 진단, 청소 및 준설)
 * - 사업명 입력 및 수행기간 범위 선택
 * - 사업 유형 필터링 기능
 * - 조회 버튼을 통한 데이터 검색 트리거
 * - Zustand를 통한 상태 관리 및 필터 값 저장
 * - Enter 키 입력 시 자동 조회 지원
 */
import React from 'react';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { SelectBox } from '@common/business_components/ui';
import { Button, Input, Label } from '@common/components';
import useStore from '@/store/useStore';
import useSearchModalStore from '@/store/useSearchModalStore';
import useSearchModal from './useSearchModal';
import useOperationTab from './useOperationTab';


const OperationTab: React.FC = () => {
  const { BIZ_TY_CD } = useStore();
  const {
    workType, setWorkType,
    var1, setVar1, var2, setVar2,
    yearFilter, setYearFilter,
  } = useSearchModalStore();
  const { handleSearch } = useSearchModal();
  const { WORK_TYPES } = useOperationTab();

  const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({
    val: item.lwpoCd,
    text: item.lwpoCdNm,
  }));

  return (
    <div className="relative flex flex-col border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
      <div className="flex items-center mb-3">
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">업무구분</Label>
        <SelectBox
          className="w-40 mr-8"
          selectClass="rounded-lg bg-white text-xl"
          label=""
          selectArray={WORK_TYPES.map((w) => ({
            val: w.val,
            text: w.text,
          }))}
          onSelectValue={(val) => setWorkType(String(val))}
          value={workType}
          selectContentClass="z-[101]"
        />
      </div>
      <div className="flex items-center mb-6">
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업명</Label>
        <Input
          className="w-[100px] !text-xl placeholder:text-center mr-8"
          placeholder="입력"
          value={var1}
          onChange={(e) => { setVar1(e.target.value); }}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault(); // Enter 키 기본 동작 방지
              handleSearch();
            }
          }}
        />
        <YearRangeSelectBox
          start={yearFilter.start}
          end={yearFilter.end}
          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
          startLabel="수행기간"
          endLabel=""
        />
        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업 유형</Label>
        <SelectBox
          className="w-60 mr-8"
          selectClass="rounded-lg bg-white text-xl"
          label=""
          selectArray={[{ val: "0", text: "전체" }, ...BIZ_TY_CD_SELECT_ARRAY]}
          value={var2}
          onSelectValue={(val) => {
            setVar2(String(val));
          }}
          selectContentClass="z-[101]"
        />
        {/* 조회 버튼 */}
        <div className="flex-1 flex justify-end">
          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
        </div>
      </div>
    </div>
  )
};

export default React.memo(OperationTab);