"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 [atflCd, setAtflCd] = useState<string | null>(null);
  const [atflId, setAtflId] = useState<string | null>(null);

  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 grid-col-2 items-center space-x-4">
          <div className='flex'>
            <SelectBox
              className="w-50 mr-3 ml-4"
              selectClass="rounded-lg bg-white"
              label="년도"
              selectArray={yearOptions}
              onSelectValue={handleYearChange}
              value={selectedYear}
            />
            <SelectBox
              className="w-50"
              selectClass="rounded-lg bg-white"
              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