"use client"
import { FileUpload, SelectBox } from '@common/business_components/ui';
import { Button, Input } 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";

const FileUploadForm = ({ title, onSubmit }: { title: string, onSubmit:(files:FileList, year:string, quarter:string) => void }) => {

    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(atflCd, atflId, orgnlFileNm);
      };
    
    // 현재 년도부터 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))}
                    />
                    <div className='flex ml-5 items-center'>
                            <div className="w-[80px] mr-4">
                            <FileUploader
                            id="atflCd"
                            className="!h-auto !max-w-none flex-col !items-start"
                            accept=".jpeg,.jpg,.png"
                            onUpload={(e) => {
                                const selectedFiles = e.target.files;
                                if (!selectedFiles) return;

                                const fileArray = Array.from(selectedFiles);
                                if(!fileArray){
                                    setFiles(fileArray);
                                }
                                if (fileArray[0]) {
                                    handleUpload(selectedFiles, {
                                        handleUploadStart: setUpload,
                                        handleSuccess: setUpload,
                                        handleResponse: handleUploadResponse(fileArray[0]),
                                    });
                                }

                            }}
                            customPreview={<></>}
                            />
                            </div>
                            <Button
                                className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
                                size="sm"
                                onClick={() => {
                                    if (!files?.[0]) {
                                        alert('파일을 선택해주세요.');
                                        return;
                                    }
                                    if (!selectedYear) {
                                        alert('등록년도를 선택해주세요.');
                                        return;
                                    }
                                    if (!selectedQuarter) {
                                        alert('분기기를 선택해주세요.');
                                        return;
                                    }
                                }}
                            >
                                등록
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default FileUploadForm