"use client"
import { SelectBox } from '@common/business_components/ui';
import { Button } from '@common/components/ui';
import React, { useState } from 'react'
import type { HttpResponse, Upload } from "tus-js-client";
import { FileUploader } from "@common/components";
import { handleUpload } from "@utils";
import { set } from 'react-hook-form';
import FileUploadForm from './fileUploadForm';

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 handleUploadResponse = (file: File) => async (res: HttpResponse) => {
        const fileInfo = res.getHeader("X-File-Info");
        if (!fileInfo) return;
        const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
        const orgnlFileNm = file.name;
        console.log('orgnlFileNm', orgnlFileNm, atflCd, atflId);
        setAtflCd(atflCd);
        setAtflId(atflId);
    };

    // 현재 년도부터 10년 전까지의 년도 옵션 생성
    const yearOptions = Array.from({ length: 10 }, (_, i) => {
        const year = new Date().getFullYear() - i;
        return { text: `${year}년`, val: year.toString() };
    });
    const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }]
    const [files, setFiles] = useState<FileList | null>(null);
    const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
    const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
    const [upload, setUpload] = useState<Upload | null>(null);

    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={(value: string | number) => setSelectedYear(String(value))}
                        /><SelectBox
                            className="w-50"
                            selectClass="rounded-lg bg-white"
                            label="분기"
                            selectArray={quater}
                            onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
                        />
                        <FileUploadForm
                            onSubmit={onSubmit}
                            showButton={true}
                            showPreview={true}
                            accept={""} />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default operFileUploadForm