import React, {useContext} from 'react';
import dayjs from 'dayjs';
import {useNavigate} from 'react-router-dom';
import useRole from "../../../../../hooks/useRole";
import AuthContext from "../../../../../context/auth-context";
import useLoading from "../../../../../hooks/useLoading";
import ListRow from "../../../../UI/DuaList/ListRow";
import TextColumn from "../../../../UI/DuaList/Columns/TextColumn";
import DuaList from "../../../../UI/DuaList/DuaList";
import ListActions from "../../../../UI/DuaList/Columns/ListActions";
import {Order} from "../../../../UI/DuaList/ListHeader/ListHead";
import StatusColumn from '../../../../UI/DuaList/Columns/StatusColumn';
import './List.scss';
import DownloadColumn from "../../../../UI/DuaList/Columns/DownloadColumn";
import {DownloadFile} from "../../../../../models/Applio/Files";
import {downloadFile} from "../../../../../API/applio";


type SubmissionsListProps = {
    submissions: any
    setPage: (n: number) => void
    setPerPage: (n: number) => void
    exportList?: any
    orderParams: { order: Order, order_by: string, setOrder: (order_by: string, order: Order) => void }
    updateSubmissions: () => void
}
const List = ({submissions, orderParams, exportList, setPage, setPerPage, updateSubmissions}: SubmissionsListProps) => {

    const activeRole = useRole();
    const [loading, setIsLoading] = useLoading(true);
    const {currentUser} = useContext(AuthContext);
    const navigate = useNavigate();
    const handleDownload = async (file: DownloadFile) => {
        const response = await downloadFile(file.hash_id);
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.download = file.originalFilename;
        link.click();
        window.URL.revokeObjectURL(url);
    };
    return (
        <div>
            {
                submissions &&
                <>
                    <DuaList
                        orderParams={orderParams}
                        exportList={exportList}
                        pagination={{
                            meta: submissions.metadata,
                            setPage: setPage,
                            setPerPage: setPerPage,
                        }}
                    >
                        {
                            submissions.records.map((submission: any) => {
                                type StatusInfo = { status: string; type: string };

                                const statusMap: Record<'approved' | 'rejected' | 'submitted', StatusInfo> = {
                                    approved:  { status: 'pending',  type: 'approved' },
                                    rejected:  { status: 'critical', type: 'rejected' },
                                    submitted: { status: 'submitted', type: 'submitted' },
                                };

                                const key = !submission.advisory_board_is_finalized
                                    ? 'submitted'
                                    : submission.selected_by_advisory !== null ? 'approved'
                                        : submission.panel_evaluation !== null ? 'rejected'
                                            : 'submitted';

                                const { status, type: statusType } = statusMap[key];
                                const statusLabel = statusType.toUpperCase();
                                return (
                                    <ListRow
                                        status={status}
                                        isActive={true}
                                        _key={submission.id}
                                        key={submission.id}
                                    >
                                        <ListActions>
                                            <ul>
                                                <li onClick={() => navigate(`/applications/applio/services/programs/view/${submission.submission_program_hash_id}/${submission.call_hash_id}?activeRole=dua_user`)}>Επισκόπηση
                                                    Υποβολής
                                                </li>
                                            </ul>
                                        </ListActions>
                                        <StatusColumn
                                            type={status}
                                            title={statusLabel}
                                            flex={'0 0 100px'}
                                            align={'center'}
                                            label={"ΚΑΤΑΣΤΑΣΗ"}
                                        >
                                            {statusLabel}
                                        </StatusColumn>
                                        <DownloadColumn
                                            label={'ΑΡΧΕΙΟ'}
                                            file={submission.panel_evaluation?.submission_file}
                                            onDownload={handleDownload}
                                            title={'Evaluation'}
                                            flex={'0 1 150px'}
                                        >
                                            Download Evaluation
                                        </DownloadColumn>
                                        <TextColumn
                                            flex='0 1 600px'
                                            label={"ΤΙΤΛΟΣ ΠΡΟΣΚΛΗΣΗΣ"}
                                            title={submission.call_title}
                                            orderable={'title'}
                                        >
                                            <div className={'full-name-container'}>
                                                <b className={'full-name'}>{submission.call_title}</b>
                                            </div>
                                        </TextColumn>
                                        <TextColumn
                                            flex='0 1 600px'
                                            label={"ΤΙΤΛΟΣ ΥΠΟΒΟΛΗΣ"}
                                            title={submission.title}
                                        >
                                            <div className={'full-name-container'}>
                                                <b className={'full-name'}>{submission.title}</b>
                                            </div>
                                        </TextColumn>
                                        <TextColumn
                                            flex='0 1 300px'
                                            label={"ΗΜΕΡΟΜΗΝΙΑ ΥΠΟΒΟΛΗΣ"}
                                            title={submission.submitted_at}
                                            align={'center'}
                                        >
                                            <div className={'full-name-container'}>
                                                <b className={'full-name'}>{dayjs(submission.submitted_at).format('DD.MM.YYYY')}</b>
                                            </div>
                                        </TextColumn>
                                    </ListRow>
                                )
                            })
                        }
                    </DuaList>
                </>
            }
        </div>
    );
}

export default List;