import React, {ReactNode, useContext, useEffect, useState} from 'react';
import FloatingWidget from "../FloatingWidget/FloatingWidget";
import dpass from '../../../assets/images/DpassLogoSimple.svg'
import './active-visits-widget.scss'
import {completeVisit, getMyVisits} from "../../../API/dpass";
import {Visit} from "../../../models/DPass/Visit";
import dayjs from "dayjs";
import NotificationsContext from "../../../context/notifications-context";
import AuthContext from "../../../context/auth-context";
import {toastError} from "../../../services/toaster";
import useLoading from "../../../hooks/useLoading";
import axios from "axios";

type ActiveVisitsWidgetProps = {
    children?: ReactNode
}

const ActiveVisitsWidget = ({children}: ActiveVisitsWidgetProps) => {

    const {unread, newMessage} = useContext(NotificationsContext)
    const {currentUser} = useContext(AuthContext)
    const [activeVisits, setActiveVisits] = useState<Visit[]>([])
    const [isLoading, setIsLoading] = useLoading(true)


    const fetchActiveVisits = async () => {
        try {
            const res = await getMyVisits({
                date_from: dayjs().format('DD-MM-YYYY'),
                date_to: dayjs().format('DD-MM-YYYY'),
                visit_statuses: ['on_going', 'timed_out'],
                page: 1,
                page_size: 99
            })
            setActiveVisits(res.data.records)
        } catch (error) {
            if (axios.isCancel(error)) return;
            toastError('Κάτι πήγε στραβά')
        }
    }

    const markAsCompleted = async (visit_id: number) => {

        try {
            setIsLoading(true)
            const res = await completeVisit(visit_id)
            const res2 = fetchActiveVisits()
        } catch (error) {
            toastError('Κάτι πήγε στραβά')
        } finally {
            setIsLoading(false)
        }

    }

    useEffect(() => {
        const controller = new AbortController();

        if (newMessage?.tag === 'dpass' || newMessage?.tag === '') {
            fetchActiveVisits()
        }

        return () => controller.abort();
    }, [newMessage])

    return (
        activeVisits.length > 0 ?
            <FloatingWidget
                urgent
                title={'Ενεργές Επισκέψεις'}
                icon={dpass}
            >
                <div className={'active-visits'}>
                    <ul>
                        {
                            activeVisits.map(v =>
                                <li key={v.id}>
                                <span
                                    className={'content'}>{v.invitation.visitor.lastname} {v.invitation.visitor.firstname}</span>
                                    <span className={'hoverable'}>
                                         Έφυγε;
                                         <button onClick={() => markAsCompleted(v.id)}>NAI</button>
                                     </span>

                                </li>
                            )
                        }

                    </ul>
                </div>
            </FloatingWidget>

            : <></>
    );
}

export default ActiveVisitsWidget;