import {Subfolder} from "../../../models/HrSupport/PersonalFolder";
import {CustomSelectOptions} from "../../../models/ReactComponents";
import React, {FormEvent, useContext, useEffect, useMemo, useState} from "react";
import EmployeeContext from "../../Difo/PersonalFolder/employeeContext";
import {toastSuccess, toastWarn} from "../../../services/toaster";
import {uploadFile} from "../../../API/hr_support";
import ActionModal from "../../UI/Modal/ActionsModal/ActionModal";
import Typography from "../../UI/Typography/Typography";
import CustomFormSection from "../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../UI/Forms/CustomLabel/CustomLabel";
import MakeCustomSelect from "../../UI/Forms/CustomSelect/MakeCustomSelect";
import CustomFileUpload from "../../UI/Forms/CustomFileUpload/CustomFileUpload";
import FormButtonsContainer from "../../UI/Forms/FormButton/FormButtonsContainer";
import FormButtonSubmit from "../../UI/Forms/FormButton/FormButtonSubmit";
import useLoading from "../../../hooks/useLoading";
import CustomTextField from "../../UI/Forms/CustomTextField/CustomTextField";
import {PermanentEmployeeDetailed} from "../../../models/HrSupport/PermanentPersonnel";
import {EgovUser} from "../../../models/EgovUser";


type AddPermanentFileModalProps = {
    close: () => void,
    subfolders: Subfolder[]
    handleFileUpload: (data: Record<string, any>) => Promise<boolean>
    initSubfolder: string | number | null
    employee: PermanentEmployeeDetailed | EgovUser
}

const AddPermanentFileModal = ({
                                   close,
                                   initSubfolder,
                                   subfolders,
                                   employee,
                                   handleFileUpload,
                               }: AddPermanentFileModalProps) => {


    const [formData, setFormData] = useState({

        file_category_id: 14, //14 is the file category for the application file
        subfolder_id: initSubfolder,
        user_id: employee.id,
        file: null,
        subject: '',
        protocol_number: '',
        attachments: [] as File[]
    })

    const handleFormSubmit = async (e: FormEvent) => {

        e.preventDefault()

        const regex = new RegExp('\d{3}\d{4}-\d{4}');

        // if(!/^\d{3}\/\d{4}-\d{4}$/.test(formData.protocol_number)){
        //     toastWarn('Παρακαλώ εισάγετε έγκυρο αριθμό πρωτοκόλλου (xxx/xxxx-xxxx)')
        //     return
        // }

        // Upload the main application file first (file_category_id: 14)
        const mainUploadSuccess = await handleFileUpload({
            file_category_id: formData.file_category_id,
            subfolder_id: formData.subfolder_id,
            user_id: formData.user_id,
            subject: formData.subject,
            protocol_number: formData.protocol_number,
            file: formData.file,
        })

        if (!mainUploadSuccess) {
            return
        }

        // If there are attachments, upload them separately with file_category_id: 12
        if (formData.attachments.length > 0) {
            await handleFileUpload({
                file_category_id: 12, //12 is for attachments
                subfolder_id: formData.subfolder_id,
                user_id: formData.user_id,
                subject: formData.subject,
                protocol_number: formData.protocol_number,
                files: formData.attachments,
            })
        }

        close()
    }

    const subfolders_for_filter = useMemo(() => [
        ...subfolders.map(s =>
            s.name === 'Ε - ΗΘΙΚΕΣ ΑΜΟΙΒΕΣ - ΠΟΙΝΕΣ'
                ? { ...s, name: `${s.name} - ΑΔΕΙΕΣ` }
                : s
        )
    ], [subfolders]);

    return (
        <ActionModal
            onClose={close}
            hasCloseButton
            title={<>Νέα Εγγραφή / <span>{employee.firstname} {employee.lastname}</span></>}>


            <form onSubmit={handleFormSubmit}>

                <Typography tag={'p'} fontSize={'1.6rem'} color='#707070' marginBottom={'30px'}>
                    Παρακαλώ επιλέξτε <b>υποφάκελο</b>, συμπληρώστε <b>Θέμα</b> και <b>Αριθμό Πρωτοκόλλου</b> και στην
                    συνέχεια πατήστε <b>Προσθήκη Αρχείου.</b>
                </Typography>

                <CustomFormSection styles={{minWidth: 'unset'}}>
                    <div className="row">
                        <div className="col-md-6">
                            <CustomLabel>ΕΠΙΛΟΓΗ ΥΠΟΦΑΚΕΛΟΥ</CustomLabel>
                            <MakeCustomSelect
                                options={subfolders_for_filter}
                                handleChange={
                                    (v) => {
                                        const normalizedValue = v === 'Ε - ΗΘΙΚΕΣ ΑΜΟΙΒΕΣ - ΠΟΙΝΕΣ - ΑΔΕΙΕΣ'
                                            ? 'Ε - ΗΘΙΚΕΣ ΑΜΟΙΒΕΣ - ΠΟΙΝΕΣ'
                                            : v;
                                        setFormData({
                                            ...formData,
                                            subfolder_id: normalizedValue,
                                        })}}
                                value={formData.subfolder_id}

                            />
                        </div>

                        <div className="col-md-6">
                            <CustomLabel req>ΑΡΙΘΜΟΣ ΠΡΩΤΟΚΟΛΛΟΥ</CustomLabel>
                            <CustomTextField
                                id={'protocol_number'}
                                onChange={(v) => setFormData({
                                    ...formData,
                                    protocol_number: v
                                })}
                                value={formData.protocol_number}
                            />

                        </div>

                        <div className="col-12">
                            <CustomLabel req>ΘΕΜΑ</CustomLabel>
                            <CustomTextField
                                id={'subject'}
                                onChange={(v) => setFormData({
                                    ...formData,
                                    subject: v
                                })}
                                value={formData.subject}
                            />

                        </div>

                    </div>
                </CustomFormSection>

                <CustomFormSection styles={{minWidth: 'unset'}}>
                    <div className={'row align-items-center'}>
                        <div className={'col-12 col-md-2'}>
                            <CustomLabel  req>
                                ΑΙΤΗΣΗ Ή ΕΓΓΡΑΦΟ
                            </CustomLabel>
                        </div>

                        <div className={'col-12 col-md'}>
                            <CustomFileUpload
                                maxSize={4194304}
                                file={formData.file}
                                onChange={(f) => setFormData({
                                    ...formData,
                                    file: f
                                })}
                            />
                        </div>

                    </div>

                </CustomFormSection>


                <CustomFormSection styles={{minWidth: 'unset'}}>
                    <div className="row align-items-center">
                        <div className={'col-12 col-md-2'}>
                            <CustomLabel>
                                ΣΥΝΟΔΕΥΤΙΚΑ ΑΡΧΕΙΑ
                            </CustomLabel>
                        </div>

                        <div className={'col-12 col-md'}>
                            <CustomFileUpload

                                id={'attachments'}
                                file={formData.attachments}
                                maxSize={2097152}
                                onChange={(fs) => setFormData({
                                    ...formData,
                                    attachments: fs
                                })}
                                multiple
                            />
                        </div>

                    </div>
                </CustomFormSection>


                <FormButtonsContainer justify={'center'}>
                    <FormButtonSubmit
                        disabled={!formData.file || !formData.subject || !formData.protocol_number}
                    >ΠΡΟΣΘΗΚΗ ΑΡΧΕΙΟΥ</FormButtonSubmit>
                </FormButtonsContainer>

            </form>


        </ActionModal>
    );
}

export default AddPermanentFileModal;