import {FileWithAttachments, PersonalFolderFile, Subfolder} from "../../../models/HrSupport/PersonalFolder";
import React, {FormEvent, useContext, useEffect, useState} from "react";
import ActionModal from "../../UI/Modal/ActionsModal/ActionModal";
import Typography from "../../UI/Typography/Typography";
import CustomFormSection from "../../UI/Forms/CustomFormSection/CustomFormSection";
import PdfPreviewModal from "../../UI/Modal/PdfPreviewModal/PdfPreviewModal";
import useRole from "../../../hooks/useRole";




type ViewPermanentFileModalProps = {
    close: () => void,
    file: FileWithAttachments,
    handleFileDelete: (uuid:string, filepath:string, project_code:string,role:string) =>  Promise<void>
    handleFileDownload: (filepath:string, name:string, project_code:string,role:string) =>  Promise<void>
    handleFileReplace: (filepath:string, project_code:string,role:string) =>  Promise<void>
    canEdit: boolean
}

const ViewPermanentFileModal = ({
                                    close,
                                    canEdit,
                                    file,
                                    handleFileDelete,
                                    handleFileDownload,
                                    handleFileReplace
                                }: ViewPermanentFileModalProps) => {


    const application = file.application!
    // const attachments = file.attachments

    const [attachments, setAttachments] = useState(file.attachments)
    const activeRole = useRole();
    const deleteAttachment = async (uuid: string, filepath: string, index: number) => {

        const newAttachments = JSON.parse(JSON.stringify(attachments))
        newAttachments.splice(index, 1)

        await handleFileDelete(uuid, filepath,'',activeRole);
        setAttachments(newAttachments)
    }

    const [activeModal, setActiveModal] = useState<string | null>(null);
    const closeModal = () => {
        setActiveModal(null);
    };

    return (
        <ActionModal
            onClose={close}
            hasCloseButton
            title={<>Προβολή Αρχείων / <span>ΑΡ. ΠΡΩΤΟΚΟΛΛΟΥ: {application.protocol_number}</span></>}>


            <div className={'viewPermanentFileModal'}>


                <Typography tag={'p'} fontSize={'1.6rem'} color='#707070' marginBottom={'30px'}>
                    Παρακαλώ επιλέξτε ένα αρχείο για διαγραφή, αντικατάσταση ή download. Εάν διαγράψετε ή αντικαταστήσετε λανθασμένα κάποιο αρχείο, θα χρειαστεί να το ανεβάσετε ξανά.
                </Typography>

                <CustomFormSection>
                    <div className="row">
                        <div className="col-2">
                            <p className={'label'}>
                                ΑΙΤΗΣΗ
                            </p>
                        </div>
                        <div className="col">
                            <div className="bordered-wrapper">
                                <p className="file-name">
                                    {application.original_filename}
                                </p>
                                <div className="buttons">

                                    {
                                        canEdit &&
                                        <button
                                            onClick={async () => {
                                                await handleFileReplace(application.filepath,'',activeRole);
                                                close()
                                            }}>ΑΝΤΙΚΑΤΑΣΤΑΣΗ
                                        </button>
                                    }

                                    <button
                                        onClick={() => handleFileDownload(application.filepath, application.original_filename,'',activeRole)}>DOWNLOAD
                                    </button>
                                    {application.temp_url &&
                                        <button
                                            onClick={() => setActiveModal('preview-pdf-application')}>ΠΡΟΕΠΙΣΚΟΠΗΣΗ
                                        </button>
                                    }



                                    {
                                        activeModal === 'preview-pdf-application' && application.temp_url &&
                                        <PdfPreviewModal onClose={closeModal} pdfUrl={application.temp_url}/>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>

                </CustomFormSection>

                <CustomFormSection>
                    <div className="row">
                        <div className="col-2">
                            <p className={'label'}>
                                ΣΥΝΝΗΜΕΝΑ
                            </p>
                        </div>
                        <div className="col">
                            {
                                attachments.map((file: PersonalFolderFile, index) =>{
                                    return(<div key={index} className="bordered-wrapper">


                                        <p className="file-name">
                                            {file.original_filename}
                                        </p>
                                        <div className="buttons">



                                            {
                                                canEdit &&
                                                <button
                                                    onClick={() => deleteAttachment(file.uuid, file.filepath, index)}>ΔΙΑΓΡΑΦΗ
                                                </button>
                                            }

                                            {
                                                canEdit &&
                                                <button
                                                    onClick={async () => {
                                                        await handleFileReplace(file.filepath,'',activeRole);
                                                        close()
                                                    }}>ΑΝΤΙΚΑΤΑΣΤΑΣΗ
                                                </button>
                                            }

                                            <button
                                                onClick={() => handleFileDownload(file.filepath, file.original_filename,'',activeRole)}>DOWNLOAD
                                            </button>
                                            {file.temp_url &&
                                                <button
                                                    onClick={() => setActiveModal('preview-pdf-attach')}>ΠΡΟΕΠΙΣΚΟΠΗΣΗ
                                                </button>
                                            }



                                            {
                                                activeModal === 'preview-pdf-attach' && file.temp_url &&
                                                <PdfPreviewModal onClose={closeModal} pdfUrl={file.temp_url}/>
                                            }
                                        </div>
                                    </div>);

                                }

                                )
                            }

                        </div>
                    </div>

                </CustomFormSection>

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

            </div>


        </ActionModal>
    );
}

export default ViewPermanentFileModal;