import React, {useState} from 'react';
import {CardRequest} from "../../../../models/DPass/CardRequest";
import {RecordsResponse} from "../../../../models/Axios";
import ListRow from "../../../UI/DuaList/ListRow";
import TextColumn from "../../../UI/DuaList/Columns/TextColumn";
import StatusColumn from "../../../UI/DuaList/Columns/StatusColumn";
import {LinkWithRole} from "../../../HOC/LinkWithRole";
import ListActions from "../../../UI/DuaList/Columns/ListActions";
import {toastError, toastSuccess} from "../../../../services/toaster";
import useLoading from "../../../../hooks/useLoading";
import {forceUppercaseGreek, formatDate} from "../../../../helpers/functions";
import '../../../UI/Modal/ActionsModal/ActionsModal.scss';
import './List.scss';
import {markAsError, resolveCardRequest, updateStatusToReady,} from "../../../../API/dpass";
import {Order} from "../../../UI/DuaList/ListHeader/ListHead";
import IndicationColumn from "../../../UI/DuaList/Columns/IndicationColumn";
import ButtonColumn from "../../../UI/DuaList/Columns/ButtonColumn";
import ConfirmationModal from "../../../UI/Modal/ActionsModal/ConfirmationModal";
import ResolveRequestModal from "./ResolveRequestModal";
import DuaList from "../../../UI/DuaList/DuaList";

type RequestsListProps = {
    orderParams?: { order: Order, order_by: string, setOrder: (order_by: string, order: Order) => void }
    requests: RecordsResponse<CardRequest>
    updateRequests: () => void
    setPage: (n: number) => void
    setPerPage: (n: number) => void

}

const List = ({requests, setPage, setPerPage,updateRequests, orderParams}: RequestsListProps) => {
    /* eslint-disable @typescript-eslint/no-unused-vars */
    const [isLoading, setIsLoading] = useLoading(true)
    const [resolveModal, setResolveModal] = useState(0)
    const [updateModal, setUpdateModal] = useState(0)
    const [markAsErrorModal, setMarkAsErrorModal] = useState(0)

    const handleResolve = async (id: number, type_id: number, date: Date | null | undefined, mobile: string) => {

        let card_delivered_date: Date | undefined | null;
        let card_returned_date: Date | undefined | null;

        if (type_id === 1) {
            card_delivered_date = date;
        } else if (type_id === 2) {
            card_returned_date = date;
        }

        try {
            setIsLoading(true);
            const result = await resolveCardRequest(id, card_delivered_date, card_returned_date, mobile)

            updateRequests()
            /* eslint-disable @typescript-eslint/no-unused-vars */
            const response_status = result.data.status_id

            toastSuccess('Το αίτημα ολοκληρώθηκε.')


        } catch (e) {
            toastError('Κάτι πήγε στραβά')
            return
        } finally {
            setResolveModal(0)
            setIsLoading(false)
        }
    }

    const handleMarkAsError = async (id: number, afm: string) => {

        try {
            setIsLoading(true)
            /* eslint-disable @typescript-eslint/no-unused-vars */
            const res = await markAsError(id, afm)
            updateRequests()
            toastSuccess('Η κατάσταση του αιτήματος άλλαξε σε "Με Σφάλμα"')
        } catch (e) {
            toastError('Φαίνεται ότι η ενέργεια δεν ολοκληρώθηκε. Παρακαλούμε προσπαθήστε ξανά')
            return
        } finally {
            setMarkAsErrorModal(0)
            setIsLoading(false)
        }
    }

    const handleReady = async (id: number, afm: string, type_name: string) => {

        try {

            setIsLoading(true)
            /* eslint-disable @typescript-eslint/no-unused-vars */
            const res = await updateStatusToReady(id, afm, type_name)
            updateRequests()
            toastSuccess('Η κατάσταση του αιτήματος άλλαξε σε "Κάρτα Έτοιμη"')
        } catch (e) {
            toastError("Φαίνεται ότι η ενέργεια δεν ολοκληρώθηκε. Παρακαλούμε προσπαθήστε ξανά.")
            return
        } finally {
            setUpdateModal(0)
            setIsLoading(false)
        }
    }


    return (
        <>
            {
                requests &&
                <DuaList
                    orderParams={orderParams}
                    pagination={{
                        meta: requests.metadata,
                        setPage: setPage,
                        setPerPage: setPerPage
                    }}
                >

                    {
                        requests.records.map(req => {

                            const canReady = (req.status.name === 'pending') && ((req.type.name === 'new_card') || (req.type.name === 'remove_card'));
                            const canResolve = (req.status.name === 'pending' && (req.type.name === 'temp_card_extension' || req.type.name === 'renew_card'))
                                || (req.status.name === 'ready' && (req.type.name === 'new_card' || req.type.name === 'remove_card'));

                            return (
                                <ListRow
                                    key={req.id}
                                    _key={req.id}
                                    isActive={req.status.name !== 'cancelled' && req.status.name !== 'completed'}
                                    status={req.type.ui_type}
                                >

                                    <ListActions>
                                        <ul>
                                            <LinkWithRole
                                                to={`view/${req.id}`}
                                            >
                                                <li>Εμφάνιση Αιτήματος</li>
                                            </LinkWithRole>
                                            {canReady &&
                                                <>
                                                    <li onClick={() => {
                                                        setUpdateModal(req.id);
                                                    }}>Κάρτα Έτοιμη
                                                    </li>
                                                </>
                                            }
                                            {canResolve &&
                                                <>
                                                    <li
                                                        onClick={() => {
                                                            setResolveModal(req.id);
                                                        }}>
                                                        Ολοκλήρωση
                                                    </li>
                                                </>
                                            }
                                            {(req.status.name !== 'completed' && req.status.name !== 'in_error') &&
                                                <li onClick={() => {
                                                    setMarkAsErrorModal(req.id)
                                                }}>
                                                    Αναφορά ως Σφάλμα
                                                </li>
                                            }
                                        </ul>
                                    </ListActions>

                                    <StatusColumn
                                        label={'ΤΥΠΟΣ ΑΙΤΗΜΑΤΟΣ'}
                                        align={'center'}
                                        type={req.type.ui_type}
                                        title={`Τύπος Αιτήματος: ` + (forceUppercaseGreek(req.type.view_name) ?? '--')}
                                        flex={'0 0 150px'}
                                    >
                                        {forceUppercaseGreek(req.type.view_name) ?? '--'}
                                    </StatusColumn>

                                    <TextColumn
                                        label={'ΕΠΩΝΥΜΟ ΟΝΟΜΑ'}
                                        flex='1.5 0.5 150px'
                                        title={`Επώνυμο Όνομα: ` + (req.lastname ?? '--') +  ' ' + (req.firstname ?? '--')}
                                        align={'left'}>
                                        {req.lastname ?? '--'} {req.firstname ?? '--'}
                                    </TextColumn>

                                    <TextColumn
                                        orderable={'created_at'}
                                        label={'ΗΜΕΡΟΜ. ΑΙΤΗΜ.'}
                                        title={'Ημερομηνία Αιτήματος: ' + (formatDate(req.created_at) ?? '--')}
                                        flex='0.5 0 80px'
                                        align={'center'}>
                                        {formatDate(req.created_at) ?? '--'}
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΕΝΑΡΞΗ ΣΥΜΒΑΣΗΣ'}
                                        title={'Έναρξη Σύμβασης: ' + (formatDate(req.contract_start_date) ?? '--')}
                                        flex='0.5 0 80px'
                                        size='12px'
                                        align={'center'}>
                                        {formatDate(req.contract_start_date) ?? '--'}
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΛΗΞΗ ΣΥΜΒΑΣΗΣ'}
                                        title={'Λήξη Σύμβασης: ' + ((req.extend_until_date ? formatDate(req.extend_until_date) : formatDate(req.contract_end_date)) ?? '--')}
                                        textWrap
                                        size='12px'
                                        flex='0.5 0 80px'
                                        align={'center'}>
                                        {(req.extend_until_date ? formatDate(req.extend_until_date) : formatDate(req.contract_end_date))}
                                    </TextColumn>

                                    <TextColumn
                                        orderable={'scientific_supervisor'}
                                        label={'ΕΠΙΣΤΗΜΟΝΙΚΟΣ ΥΠΕΥΘΥΝΟΣ'}
                                        title={'Επιστημονικός Υπεύθυνος: ' + (req.scientific_supervisor ?? '--')}
                                        flex='1.5 1 150px'
                                        align={'left'}>
                                        {req.scientific_supervisor !== '' && req.scientific_supervisor}
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΟΡΓ. ΜΟΝΑΔΑ'}
                                        title={'Οργανική Μονάδα: ' + (req.unit_acronym ?? '--')}
                                        flex={'0.5 0 60px'}
                                        align={'left'}>
                                        {req.unit_acronym ?? '--'}
                                    </TextColumn>

                                    <IndicationColumn
                                        label={'ΚΑΤΑΣΤΑΣΗ ΑΙΤΗΜ.'}
                                        title={`Κατάσταση Αιτήματος: ` + (forceUppercaseGreek(req.status.view_name) ?? '--')}
                                        flex={'0 0 130px'}
                                        text={forceUppercaseGreek(req.status.view_name)}
                                        type={req.status.ui_type ?? '--'}
                                    />

                                    <ButtonColumn
                                        flex={'0 0 120px'}
                                        isResolved={req.status.name === 'completed'}
                                        disabled={req.status.name === 'cancelled' || req.status.name === 'in_error'}
                                        // @ts-ignore
                                        action={() => {
                                            if (canReady) {
                                                setUpdateModal(req.id)
                                            } else if (canResolve) {
                                                setResolveModal(req.id)
                                            }
                                        }}
                                    >
                                        {canReady && 'ΚΑΡΤΑ ΕΤΟΙΜΗ'}
                                        {canResolve && 'ΟΛΟΚΛΗΡΩΣΗ'}
                                        {req.status.name === 'cancelled' && "ΑΚΥΡΩΘΗΚΕ"}
                                        {req.status.name === 'completed' && "ΟΛΟΚΛΗΡΩΘΗΚΕ"}
                                        {req.status.name === 'in_error' && "ΣΦΑΛΜΑ"}
                                    </ButtonColumn>
                                </ListRow>
                            );
                        })
                    }
                </DuaList>
            }
            {
                (updateModal > 0) &&
                <ConfirmationModal
                    onClose={() => setUpdateModal(0)}
                    title={'Κάρτα Έτοιμη'}
                    text={`Είστε σίγουρη/ος ότι θέλετε να μαρκάρετε το αίτημα ως "'ΚΑΡΤΑ ΕΤΟΙΜΗ'";`}
                    modalAction={() => handleReady(updateModal, requests.records.find(req => req.id === updateModal)!.afm, requests.records.find(req => req.id === updateModal)!.type.name)}
                >
                </ConfirmationModal>
            }
            {
                (markAsErrorModal > 0) &&
                <ConfirmationModal
                    onClose={() => setMarkAsErrorModal(0)}
                    title={'Αναφορά ως Σφάλμα'}
                    text={`Είστε σίγουρη/ος ότι θέλετε να μαρκάρετε το αίτημα ως "'Με Σφάλμα'";`}
                    modalAction={() => handleMarkAsError(markAsErrorModal, requests.records.find(req => req.id === markAsErrorModal)!.afm)}
                >
                </ConfirmationModal>
            }
            {

                (resolveModal > 0) &&
                <ResolveRequestModal
                    request={requests.records.find(req => req.id === resolveModal)}
                    resolve={(id, type_id, date, mobile) => handleResolve(id, type_id, date, mobile)}
                    close={() => setResolveModal(0)}
                />

            }


        </>
    );
}

export default List;