import React, {useState} from 'react';
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 useLoading from "../../../../hooks/useLoading";
import {forceUppercaseGreek, formatDate} from "../../../../helpers/functions";
import {AccountRequest} from "../../../../models/NetSupport/AccountRequest";
import ButtonColumn from "../../../UI/DuaList/Columns/ButtonColumn";
import MarkAsErrorModal from "./MarkAsErrorModal";
import EditUserNameModal from "./EditUserNameModal";
import ResolveModal from "./ResolveModal";
import IndicationColumn from "../../../UI/DuaList/Columns/IndicationColumn";
import {
    editAccountRequestUsername,
    markAccountRequestAsError,
    resolveAccountRequest
} from "../../../../API/net_support";
import {toastError} from "../../../../services/toaster";
import DuaList, {Order} from "../../../UI/DuaList/DuaList";
import {RecordsResponse} from "../../../../models/Axios";
import useModuleOptions from "../../../../hooks/useModuleOptions";


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

const List = ({requests, setPage, updateRequests, orderParams, setPerPage}: RequestsListProps) => {

    const [isLoading, setIsLoading] = useLoading(true)
    const [markAsErrorModal, setMarkAsErrorModal] = useState<number>(0);
    const [editUsernameModal, setEditUsernameModal] = useState<number>(0);
    const [resolveModal, setResolveModal] = useState<number>(0);

    const handleUsernameChange = async (id: number, username: string) => {

        try {
            setIsLoading(true)
            const res = await editAccountRequestUsername(id, username)
            setIsLoading(false)
            updateRequests()

        } catch (e: any) {
            toastError('Κάτι πήγε στραβά.')
        } finally {
            setEditUsernameModal(0)
        }
    }

    const handleMarkAsError = async (id: number) => {

        try {

            setIsLoading(true)
            const res = await markAccountRequestAsError(id)
            setIsLoading(false)
            updateRequests()

        } catch (e: any) {
            toastError('Κάτι πήγε στραβά.')
        } finally {
            setMarkAsErrorModal(0)
        }
    }

    const handleResolve = async (id: number, username: string, type: string, password: string) => {

        try {
            setIsLoading(true)

            /**
             * edit username before resolving if it's not remove account request
             */
            if (type !== 'remove_account') {
                const res = await editAccountRequestUsername(id, username)
            }


            const res2 = await resolveAccountRequest(id, password)
            updateRequests()

        } catch (e: any) {
            toastError('Φαίνεται ότι η ενέργεια δεν ολοκληρώθηκε. Παρακαλούμε προσπαθήστε ξανά.')
        } finally {
            setIsLoading(false)
            setResolveModal(0)
        }
    }

    const {allowedActions} = useModuleOptions()
    return (
        <>

            {
                Boolean(markAsErrorModal) &&
                <MarkAsErrorModal
                    close={() => setMarkAsErrorModal(0)}
                    markError={() => handleMarkAsError(markAsErrorModal)}

                />
            }

            {
                Boolean(editUsernameModal) &&
                <EditUserNameModal
                    close={() => setEditUsernameModal(0)}
                    oldUsername={requests.records.find((req) => req.id === editUsernameModal)!.username ?? 'missing username'}
                    editUsername={(newUsername: string) => handleUsernameChange(editUsernameModal, newUsername)}

                />
            }

            {
                Boolean(resolveModal) &&
                <ResolveModal close={() => setResolveModal(0)}
                              resolveRequest={(username, type, password) => handleResolve(resolveModal, username, type, password)}
                              request={requests.records.find((req) => req.id === resolveModal)!}
                ></ResolveModal>

            }


            {
                requests &&

                <DuaList
                    pagination={{
                        meta: requests.metadata,
                        setPage: setPage,
                        setPerPage: setPerPage
                    }}
                    orderParams={orderParams}
                >
                    {requests.records.map((req) =>

                        <ListRow
                            _key={req.id}
                            key={req.id}
                            isActive={!(req.status.name === 'cancelled' || req.status.name === 'completed')}
                            status={req.type?.ui_type}

                        >
                            <ListActions>
                                <ul>{allowedActions!.canView &&
                                    <LinkWithRole
                                        to={`view/${req.id}`}
                                    >
                                        <li>Εμφάνιση Αιτήματος</li>
                                    </LinkWithRole>}
                                    {
                                        allowedActions!.canEdit && req.status?.name === 'pending' &&
                                        <li onClick={() => setMarkAsErrorModal(req.id)}>Αναφορά ως Σφάλμα</li>
                                    }


                                    {
                                        allowedActions!.canEdit && req.status?.name === 'pending' && req.type?.name !== 'remove_account' &&
                                        <li onClick={() => setEditUsernameModal(req.id)}>
                                            Επεξεργασία Username
                                        </li>
                                    }


                                </ul>
                            </ListActions>

                            <StatusColumn
                                label={'ΤΥΠΟΣ ΑΙΤΗΜΑΤΟΣ'}
                                title={req.type?.description}
                                flex={'0 0 125px'}
                                type={req.type?.ui_type}
                                align={'center'}
                                orderable={'type'}
                            >
                                {forceUppercaseGreek(req.type?.view_name)}
                            </StatusColumn>


                            <TextColumn
                                label={'USERNAME/DEMOKRITOS MAIL'}
                                flex='1 0 90px'
                                title={`Username ` +req.username}
                                align={'left'}
                                orderable={'username'}

                            >
                                <b>{req.username}</b>


                            </TextColumn>

                            <TextColumn
                                label={'ΟΝΟΜΑΤΕΠΩΝΥΜΟ'}
                                flex='1.5 0 150px'
                                title={`Ονοματεπώνυμο: ${req.firstname_el} ${req.lastname_el}`}
                                align={'left'}
                                orderable={'lastname_el'}
                            >
                                <b>{req.lastname_el} {req.firstname_el}</b>

                            </TextColumn>

                            <TextColumn
                                label={'ΟΡΓΑΝΙΚΗ ΜΟΝΑΔΑ'}
                                flex='1.5 0 150px'
                                title={`Οργανική Μονάδα: ${req.unit}`}
                                align={'left'}
                            >
                                <b>{req.unit}</b>

                            </TextColumn>

                            <TextColumn
                                label={'ΚΙΝΗΤΟ'}
                                flex='0 0 100px'
                                title={`Κινητό: `+req.mobile_phone}
                                align={'center'}
                            >
                                <b>{req.mobile_phone}</b>

                            </TextColumn>

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


                            <IndicationColumn
                                flex={'0.3 0 120px'}
                                label={'ΚΑΤΑΣΤΑΣΗ ΑΙΤΗΜΑΤΟΣ'}
                                text={req.status?.view_name ?? req.status?.view_name_el}
                                type={req.status?.type ?? req.status?.ui_type ?? 'pending'}
                                orderable={'status'}
                                title={`Κατάσταση Αιτήματος: `+req.status?.view_name ?? req.status?.view_name_el}
                            />


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

                                {formatDate(req.created_at)}
                            </TextColumn>

                            {allowedActions!.canEdit &&
                                <ButtonColumn
                                    flex={' 0 0 120px'}
                                    action={() => setResolveModal(req.id)}
                                    disabled={req.status?.name !== 'pending'}
                                    isResolved={req.status?.name === 'completed'}
                                >
                                    {req.status?.name === 'completed' ? 'ΟΛΟΚΛΗΡΩΘΗΚΕ' : 'ΟΛΟΚΛΗΡΩΣΗ'}
                                </ButtonColumn>}


                        </ListRow>
                    )}
                </DuaList>


            }


        </>
    );
}

export default List;