import React, {ReactNode, useState} from 'react';
import {Invitation} from "../../../../models/DPass/Invitation";
import {RecordsResponse} from "../../../../models/Axios";
import ListRow from "../../../UI/DuaList/ListRow";
import TextColumn from "../../../UI/DuaList/Columns/TextColumn";
import dayjs from "dayjs";
import StatusColumn from "../../../UI/DuaList/Columns/StatusColumn";
import {LinkWithQuery} from "../../../HOC/LinkWithQuery";
import ListActions from "../../../UI/DuaList/Columns/ListActions";
import {cancelInvitation, sendInvitation} from "../../../../API/dpass";
import {toastSuccess} from "../../../../services/toaster";
import EmptyList from "../../../UI/DuaList/EmptyList";
import ActionModal from '../../../UI/Modal/ActionsModal/ActionModal';
import FormButtonSumbit from '../../../UI/FormButton/FormButtonSubmit';
import FormButtonCancel from '../../../UI/FormButton/FormButtonCancel';
import useLoading from "../../../../hooks/useLoading";
import {forceUppercaseGreek} from "../../../../helpers/functions";
import IconColumn from "../../../UI/DuaList/Columns/IconColumn";
import mass from "../../../../assets/images/mass-invitation.svg";
import group from "../../../../assets/images/group-invitation.svg";
import helperIcon from "../../../../assets/images/helper-icon.svg";
import '../../../UI/Modal/ActionsModal/ActionsModal.scss';
import './InvitationList.scss';

type InvitationsListProps = {
    invitations: RecordsResponse<Invitation>
    updateInvitations: () => void
}

const InvitationsList = ({invitations, updateInvitations}: InvitationsListProps) => {
    const [isLoading, setIsLoading] = useLoading(true)
    const [show, setShow] = useState<boolean>(false);
    const handleSendInvitation = async (id: number) => {
        try {
            const res = await sendInvitation(id)
            updateInvitations()
            toastSuccess('Η αποστολή της πρόσκλησης μέσω email ολοκληρώθηκε με επιτυχία.')
            // @ts-ignore
            document.querySelector('body').click()
        } catch (e) {
            return
        }
    }

    const handleCancelInvitation = async (id: number) => {
        try {
            const res = await cancelInvitation(id)
            updateInvitations()
            toastSuccess('Η ακύρωση της πρόσκλησης ολοκληρώθηκε με επιτυχία.')
            setShow(false);
        } catch (e) {
            return
        }
    }
    const TypeMap = {
        'single': '',
        'mass': mass,
        'group': group,
    }

    return (
        <>
            {
                invitations.records.length > 0 ?
                    <div className="invitations-list">
                        {


                            invitations.records.map(inv => {

                                const host = inv.principal_signature !== inv.host_fullname ?
                                    inv.principal_signature
                                    :
                                    inv.host_fullname


                                return (
                                    <ListRow
                                        key={inv.id}
                                        status={inv.status.type}
                                    >
                                        <TextColumn
                                            flex='auto'
                                            small
                                            title={`Ημερομηνία Αποστολής`}
                                            align={'left'}>
                                            {
                                                dayjs(inv.created_at).format('DD/MM/YYYY')
                                            }
                                        </TextColumn>


                                        <TextColumn

                                            color={inv.status.name === 'accepted' ? 'blue' : 'gray'}
                                            flex='230px'
                                            title={`Email Eπισκέπτη: ${inv.visitor.email}`}
                                            align={'left'}>

                                            {
                                                inv.status.name === 'accepted' ?
                                                    <span><b>{inv.visitor.firstname + " " + inv.visitor.lastname}</b></span>
                                                    :
                                                    <span style={{color: '#040059'}}><b>{inv.visitor.email}</b></span>

                                            }

                                        </TextColumn>
                                        <IconColumn
                                            flex={'70px'}
                                            icon={TypeMap[inv.type]}>
                                        </IconColumn>
                                        <TextColumn
                                            flex='auto'
                                            small
                                            align={'left'}>
                                            Επισκέψεις {inv.visits.length}
                                        </TextColumn>

                                        <TextColumn
                                            title={inv.title}
                                            textWrap
                                            medium
                                            align={'left'}>
                                            <b>
                                                {inv.title.substring(0, 60)}
                                                {inv.title.length>60 && '...'}
                                            </b>
                                        </TextColumn>


                                        <TextColumn
                                            title={`${inv.building_name} ${inv.institute_name}`}
                                            flex={'150px'}
                                            align={'left'}>
                                            <b>
                                                {inv.building_name} {inv.institute_name}
                                            </b>
                                        </TextColumn>

                                        <TextColumn
                                            title={`Αίθουσα: ${inv.room}`}
                                            flex={'180px'}
                                            align={'left'}>
                                            <b>{inv.room}</b>
                                        </TextColumn>


                                        <TextColumn
                                            title={`Οικοδεσπότης: ${host}`}
                                            flex={'180px'}
                                            align={'left'}>
                                            <b>
                                                {host}
                                            </b>
                                        </TextColumn>


                                        <StatusColumn
                                            title={inv.status.description}
                                            flex={'100px'}
                                            type={inv.status.type}
                                        >
                                            {forceUppercaseGreek(inv.status.view_name)}
                                        </StatusColumn>

                                        <ListActions>
                                            <ul>
                                                <LinkWithQuery
                                                    to={`view/${inv.id.toString()}`}
                                                >
                                                    <li>Εμφάνιση</li>
                                                </LinkWithQuery>

                                                {/*<li onClick={() => handleSendInvitation(inv.id)}>Αποστολή</li>*/}
                                                {/**
                                                 can cancel 1 2
                                                 */
                                                }
                                                {(inv.status_id === 1 || inv.status_id === 2) &&

                                                    // <li onClick={() => handleCancelInvitation(inv.id)}>Ακύρωση</li>
                                                    <li onClick={() => setShow(true)}>Ακύρωση</li>
                                                }
                                                {
                                                    show && <ActionModal onClose={() => setShow(false)}
                                                                         customClass={'invitation-list-modal'}>
                                                        <div className='invitation-list-modal--image-container'>
                                                            <img src={helperIcon} alt='govoulis'/>
                                                        </div>
                                                        <p>Είστε σίγουρος/η πως θέλετε να ακυρώσετε
                                                            την <span>πρόσκλησή</span> σας;</p>
                                                        <p className='last-p'>Αμέσως μετά την ακύρωσή της, ο επισκέπτης
                                                            σας<br></br>θα λάβει e-mail ακύρωσης πρόσκλησης.</p>
                                                        <div className='action-modal--btn-container'>
                                                            <FormButtonCancel onClick={() => setShow(false)}
                                                                              buttonType={'button'}>
                                                                <p>ΟΧΙ</p>
                                                            </FormButtonCancel>
                                                            <FormButtonSumbit onClick={() => handleCancelInvitation(inv.id)}
                                                                              buttonType={'submit'} loading={isLoading}>
                                                                <p>NAI</p>
                                                            </FormButtonSumbit>
                                                        </div>
                                                    </ActionModal>

                                                }
                                            </ul>
                                        </ListActions>
                                    </ListRow>
                                );

                            })
                        }

                    </div>
                    :
                    <EmptyList>
                        Δεν υπάρχουν διαθέσιμες προσκλήσεις. <br/>
                        Για τη δημιουργία πρόσκλησης επιλέξτε πάνω δεξιά
                    </EmptyList>}


        </>
    );
}

export default InvitationsList;