import useListControl from "../../../hooks/useListControl";
import {
    FileWithAttachments,
    GetFilesParams,
    PersonalFolderFile,
    Subfolder
} from "../../../models/HrSupport/PersonalFolder";
import {
    getMyPermanentUserFiles,
    getPermanentUserFiles,
} from "../../../API/hr_support";
import React, {useEffect, useMemo, useState} from "react";
import useSetBreadCrumbs from "../../../context/useSetBreadcrumbs";
import SearchBar from "../../UI/SearchBar/SearchBar";
import MakeCustomRadioSelect from "../../UI/Forms/CustomSelect/MakeCustomRadioSelect";
import {CustomSelectOptions} from "../../../models/ReactComponents";
import CreateButton from "../../UI/CreateButton/CreateButton";
import AddUser from "../../SVG/AddUser";
import DuaList from "../../UI/DuaList/DuaList";
import ListRow from "../../UI/DuaList/ListRow";
import ListActions from "../../UI/DuaList/Columns/ListActions";
import StatusColumn from "../../UI/DuaList/Columns/StatusColumn";
import TextColumn from "../../UI/DuaList/Columns/TextColumn";
import dayjs from "dayjs";
import DigitizedFile from "./DigitizedFile";
import AddPermanentFileModal from "./AddPermanentFileModal";
import {PermanentEmployeeDetailed} from "../../../models/HrSupport/PermanentPersonnel";
import useFile from "../z_hooks/useFile";
import {EgovUser} from "../../../models/EgovUser";
import ViewPermanentFileModal from "./ViewPermanentFileModal";
import AddExtraFilesPermanentFileModal from "./AddExtraFilesPermanentFileModal";
import DeleteModal from "../../UI/Modal/ActionsModal/DeleteModal";
import EditPermanetFileModal from "./EditPermantentFileModal";
import PlusSignSmall from "../../SVG/PlusSignSmall";
import AddIcon from "../../SVG/AddIcon";
import useRole from "../../../hooks/useRole";


type FilesListProps = {
    canEdit?: boolean
    subfolders: Subfolder[]
    employee?: PermanentEmployeeDetailed | EgovUser
    scope: 'dua' | 'hr_manager'
    updateSignal: number
    sendSignal: () => void
}

const InitParams = (): GetFilesParams => {
    return {
        page: 1,
        page_size: 10,
        subfolder_id: [],
        subfolder_id_emergency: null,
        search: '',
        dua_code: []
    }
};

const ColorArrayForFolders = ['pending',
    'success',
    'warning',
    'error',
    'inactive',
    'completed',
    'cancel',
]
const FilesList = ({canEdit = false, subfolders, employee, scope, sendSignal, updateSignal}: FilesListProps) => {

    const [files, filesParams, setFilesParams, fetchFiles] = useListControl<GetFilesParams, PersonalFolderFile>(InitParams(), scope === 'hr_manager' ? getPermanentUserFiles : getMyPermanentUserFiles);
    const [addFileModal, setAddFileModal] = useState(false)
    const [modal, setModal] = useState<{
        file: FileWithAttachments,
        mode: 'view' | 'edit' | 'move' | 'delete' | 'add'
    } | null>(null)
    const activeRole = useRole();
    const {
        handleFileReplace,
        handleFileDownload,
        handleFileUpload,
        handleFileDelete,
        handleFileEdit,
        handleFileMove
    } = useFile(sendSignal)

    useSetBreadCrumbs(4, 'Αρχεία')

    // @ts-ignore
    const digitizedFolder = files && files.digitized_file

    useEffect(() => {

        (async () => {
            if (updateSignal > 0) await fetchFiles()
        })()


    }, [updateSignal]);

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

    return (
        <div>


            {
                modal && modal.mode === 'view' && <ViewPermanentFileModal

                    canEdit={canEdit}
                    close={() => setModal(null)}
                    file={modal.file}
                    handleFileDownload={handleFileDownload}
                    handleFileDelete={handleFileDelete}
                    handleFileReplace={handleFileReplace}
                />
            }

            {
                modal && modal.mode === 'add' && <AddExtraFilesPermanentFileModal

                    close={() => setModal(null)}
                    file={modal.file}
                    handleFileUpload={handleFileUpload}
                    employee={employee!}

                />
            }

            {
                modal && (modal.mode === 'edit' || modal.mode === 'move') && <EditPermanetFileModal
                    subfolders={subfolders}
                    close={() => setModal(null)}
                    file={modal.file}
                    employee={employee!}
                    mode={modal.mode}
                    handleFileEdit={handleFileEdit}
                    handleFileMove={handleFileMove}
                />
            }


            {
                modal && modal.mode === 'delete' && <DeleteModal onClose={() => setModal(null)}
                                                                 text={'Είστε σίγουρη/ος πως θέλετε να διαγράψετε την Εγγραφή; \n ' +
                                                                     'Θα διαγραφεί η αίτηση ή το έγγραφο μαζί με όλα τα συνοδευτικά αρχεία'}
                                                                 onDelete={async () => {
                                                                     await handleFileDelete(modal?.file.application!.uuid, modal?.file.application!.filepath,'',activeRole)
                                                                     setModal(null)
                                                                 }}


                />
            }

            {
                employee && canEdit && addFileModal && <AddPermanentFileModal
                    initSubfolder={filesParams.subfolder_id[0]}
                    subfolders={subfolders}
                    close={() => setAddFileModal(false)}
                    handleFileUpload={handleFileUpload}
                    employee={employee}
                />
            }


            <div className="search-wrapper row mb-5 gap-4">
                <div className="col">
                    <SearchBar
                        onSearch={(s) => setFilesParams({
                            ...filesParams,
                            page: 1,
                            search: s
                        })}

                        value={filesParams.search ?? ''}
                    >
                        <MakeCustomRadioSelect
                            options={subfolders_for_filter as CustomSelectOptions}
                            theme="search-listbox"
                            value={filesParams.subfolder_id.length === 0 ? 'all' : filesParams.subfolder_id[0]}
                            handleChange={(value) => {
                                const normalizedValue = value === 'Ε - ΗΘΙΚΕΣ ΑΜΟΙΒΕΣ - ΠΟΙΝΕΣ - ΑΔΕΙΕΣ'
                                    ? 'Ε - ΗΘΙΚΕΣ ΑΜΟΙΒΕΣ - ΠΟΙΝΕΣ'
                                    : value;

                                setFilesParams({
                                    ...filesParams,
                                    subfolder_id: normalizedValue === 'all' ? [] : [normalizedValue],
                                    page: 1,
                                });
                            }}
                        />

                    </SearchBar>

                </div>

                {
                    canEdit &&
                    <div className="col-auto">
                        <CreateButton onClick={() => {
                            setAddFileModal(true)
                        }}>
                            <AddIcon></AddIcon>
                            <p>ΝΕΑ ΕΓΓΡΑΦΗ</p>
                        </CreateButton>
                    </div>
                }


            </div>


            {
                digitizedFolder && filesParams.subfolder_id.length > 0 &&
                <div>
                    <DigitizedFile digitizedFolder={digitizedFolder}
                                   handleDownload={handleFileDownload}
                                   handleReplace={handleFileReplace}
                                   canEdit={canEdit}
                    />

                </div>
            }


            <div className={'mt-7'}>
                {
                    files &&
                    <DuaList
                        pagination={{
                            meta: files.metadata,
                            setPage: (n: number) => setFilesParams({
                                ...filesParams,
                                page: n,
                            }),
                            setPerPage: (n: number) => setFilesParams({
                                ...filesParams,
                                page: 1,
                                page_size: n

                            }),
                        }}
                    >
                        {
                            // @ts-ignore
                            files?.records.filter((file: FileWithAttachments) => file.application).map((fileWithAttachments: FileWithAttachments) => {

                                const application = fileWithAttachments.application!

                                return (
                                    <ListRow key={application.id} _key={application.id}>
                                        <ListActions>
                                            <ul>

                                                <li onClick={() => setModal({
                                                    file: fileWithAttachments,
                                                    mode: 'view'
                                                })}>Προβολή
                                                    Αρχείων
                                                </li>

                                                {canEdit &&
                                                    <li onClick={() => setModal({
                                                        file: fileWithAttachments,
                                                        mode: 'add'
                                                    })}>Προσθήκη Συνοδευτικών
                                                        Αρχείων</li>}

                                                {canEdit &&
                                                    <li onClick={() => setModal({
                                                        file: fileWithAttachments,
                                                        mode: 'move'
                                                    })}>Μετακίνηση
                                                        Εγγραφής </li>}

                                                {canEdit &&
                                                    <li onClick={() => setModal({
                                                        file: fileWithAttachments,
                                                        mode: 'edit'
                                                    })}>Επεξεργασία
                                                        Εγγραφής</li>}

                                                {canEdit &&
                                                    <li onClick={() => setModal({
                                                        file: fileWithAttachments,
                                                        mode: 'delete'
                                                    })}>Διαγραφή Εγγραφής</li>}


                                            </ul>
                                        </ListActions>

                                        <StatusColumn
                                            label={'ΥΠΟΦΑΚΕΛΟΣ'}
                                            type={ColorArrayForFolders[application.subfolder_id % 7]}
                                            align={'center'}
                                            flex={'0 0 130px'}
                                        >
                                            {application.subfolder_ui_name}
                                        </StatusColumn>


                                        <TextColumn
                                            label={'ΑΡ. ΠΡΩΤΟΚΟΛΛΟΥ'}
                                            flex='0.5 0 110px'
                                            align={'center'}
                                        >
                                            <b>{application.protocol_number}</b>
                                        </TextColumn>

                                        <TextColumn
                                            size={'14px'}
                                            label={'ΘΕΜΑ'}
                                            flex='1.5 0 250px'
                                            align={'left'}
                                        >
                                            <b>{application.subject}</b>
                                        </TextColumn>

                                        <TextColumn
                                            label={'ΚΑΤΑΧΩΡΗΣΗ ΑΠΟ'}
                                            flex='1 0 110px'
                                            align={'left'}
                                        >
                                            <b>{application.uploader_user_full_name}</b>
                                        </TextColumn>

                                        <TextColumn
                                            label={'ΗΜΕΡ. ΚΑΤΑΧΩΡΗΣΗΣ'}
                                            flex='0.5 0 110px'
                                            align={'left'}
                                        >
                                            {dayjs(application.uploaded_at).format('DD.MM.YYYY')}
                                        </TextColumn>

                                    </ListRow>

                                )
                            })

                        }
                    </DuaList>
                }
            </div>
        </div>
    );
}


export default FilesList;