import {EgovUser} from "../../../models/EgovUser";
import {FileWithAttachments} from "../../../models/HrSupport/PersonalFolder";
import React, {FormEvent, useState} from "react";
import ActionModal from "../../UI/Modal/ActionsModal/ActionModal";
import Typography from "../../UI/Typography/Typography";
import CustomFormSection from "../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomFileUpload from "../../UI/Forms/CustomFileUpload/CustomFileUpload";
import FormButtonSubmit from "../../UI/Forms/FormButton/FormButtonSubmit";
import {PermanentEmployeeDetailed} from "../../../models/HrSupport/PermanentPersonnel";


type AddExtraFilesPermanentFileModalProps = {
    close: () => void,
    handleFileUpload: (data: Record<string, any>) => Promise<boolean>
    employee: PermanentEmployeeDetailed | EgovUser
    file: FileWithAttachments
}

const AddExtraFilesPermanentFileModal = ({
                                             close,
                                             handleFileUpload,
                                             file,
                                             employee
                                         }: AddExtraFilesPermanentFileModalProps) => {

    const [attachments, setAttachments] = useState<File[]>([])

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

        e.preventDefault()

        const formData = {

            file_category_id: 12, //12 is for attachments
            subfolder_id: file.application?.subfolder_id,
            user_id: employee.id,
            subject: file.application?.subject,
            protocol_number: file.application?.protocol_number,
            files: attachments
        };

        if (await handleFileUpload(formData)) {
            close()
        }
    }


    return (
        <ActionModal
            onClose={close}
            hasCloseButton
            title={<>Προσθήκη Συνοδευτικών Αρχείων / <span>ΑΡ. ΠΡΩΤΟΚΟΛΛΟΥ: {file.protocol_number}</span></>}>


            <div className={'addExtraFilesPermanentFileModal'}>

                <Typography tag={'p'} fontSize={'1.6rem'} color='#707070' marginBottom={'30px'}>
                    Παρακαλώ προσθέστε επιπλέον συνοδευτικά αρχεία
                </Typography>

                <CustomFormSection>
                    <div className="row">
                        <div className="col-2">
                            <p className={'label'}>
                                ΣΥΝΟΔΕΥΤΙΚΑ
                            </p>
                        </div>
                        <div className="col">
                            <ul className={'attachments-list'}>
                                {
                                    file.attachments.map((attachment) => (
                                        <li key={attachment.id}>{attachment.original_filename}</li>
                                    ))
                                }
                            </ul>
                        </div>
                    </div>

                </CustomFormSection>


                <CustomFormSection>
                    <form onSubmit={handleFormSubmit}>
                        <div className="row align-items-center">
                            <div className="col-2">
                                <p className={'label'}>
                                    ΠΡΟΣΘΗΚΗ
                                </p>
                            </div>
                            <div className="col">
                                <CustomFileUpload
                                    maxSize={4194304}
                                    id={'attachments'}
                                    file={attachments}
                                    onChange={(fs) => setAttachments(fs)}
                                    multiple
                                />
                            </div>

                            <div className="col-auto">
                                <FormButtonSubmit
                                    disabled={attachments.length === 0}
                                >ΠΡΟΣΘΗΚΗ</FormButtonSubmit>
                            </div>
                        </div>
                    </form>

                </CustomFormSection>

                <p className={'info text-center'}>Τα αρχεία ενημερώνονται αυτόματα μετά από κάθε ενέργεια.</p>

            </div>


        </ActionModal>
    );
}

export default AddExtraFilesPermanentFileModal;