/**
 * 📄 Oper File Upload Form Component
 * 운영 파일 업로드 폼 컴포넌트
 *
 * - 년도 및 분기 선택 기능
 * - 파일 업로드 및 등록 처리
 * - 년도 변경 시 분기 옵션 동적 업데이트
 * - 파일 형식 검증 및 미리보기 지원
 * - 콜백 함수를 통한 업로드 결과 전달
 * - TUS 프로토콜을 통한 대용량 파일 업로드
 */
"use client";
import { SelectBox } from "@common/business_components/ui";
import React, { useState, useEffect } from "react";
import FileUploadForm from "./fileUploadForm";
import { yearOptions, getQuarterOptions } from "@/components/lib/utils";

const operFileUploadForm = ({
  title,
  onSubmit,
}: {
  title: string;
  onSubmit: (
    files: string,
    year: string,
    quarter: string,
    code: string,
    id: string,
  ) => void;
}) => {
  const [selectedYear, setSelectedYear] = useState<string>(
    yearOptions[0]?.val || "",
  );
  const [quaterOptions, setQuaterOptions] = useState(() =>
    getQuarterOptions(selectedYear),
  );
  const [selectedQuarter, setSelectedQuarter] = useState<string>(
    quaterOptions[0]?.val || "",
  );

  // 년도가 변경될 때 분기 옵션 업데이트
  useEffect(() => {
    const updatedQuarterOptions = getQuarterOptions(selectedYear);
    setQuaterOptions(updatedQuarterOptions);
    // 분기 옵션이 변경되면 첫 번째 옵션으로 자동 선택
    setSelectedQuarter(updatedQuarterOptions[0]?.val || "");
  }, [selectedYear]);

  // 년도 변경 핸들러
  const handleYearChange = (value: string | number) => {
    const yearValue = String(value);
    setSelectedYear(yearValue);
  };

  return (
    <div>
      <div className="card-header">
        <h3 className="text-2xl font-medium">{title}</h3>
      </div>
      <div className="card p-6">
        <div className="grid-col-2 grid items-center space-x-4">
          <div className="flex">
            <SelectBox
              className="w-50 ml-4 mr-3"
              selectClass="rounded-lg bg-background"
              label="년도"
              selectArray={yearOptions}
              onSelectValue={handleYearChange}
              value={selectedYear}
            />
            <SelectBox
              className="w-50"
              selectClass="rounded-lg bg-background"
              label="분기"
              selectArray={quaterOptions}
              onSelectValue={(value: string | number) =>
                setSelectedQuarter(String(value))
              }
              value={selectedQuarter}
            />
            <FileUploadForm
              onSubmit={(files, year, quarter, code, id) => {
                onSubmit(
                  files,
                  (selectedYear ?? year) || "",
                  (selectedQuarter ?? quarter) || "",
                  code,
                  id,
                );
              }}
              showButton={true}
              showPreview={true}
              accept={""}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default operFileUploadForm;