import EventInvalidSeatsType from "@/api-queries/events/event-invalid-seats-type";
import EventType from "@/api-queries/events/event-type";
import GetEventInvalidSeatsQuery from "@/api-queries/events/get-event-invalid-seats-query";
import { AxiosContext } from "@/providers/axios/axios-provider";
import React, { useContext, useEffect, useState } from "react";

export type ValidateEventSeatsProps = {
    onDeallocateTakenSeatsWithNoAssociation: () => Promise<void>;
    event: EventType | null;
};

const ValidateEventSeats = ({
    onDeallocateTakenSeatsWithNoAssociation,
    event
}: ValidateEventSeatsProps) => {
    const axios = useContext(AxiosContext);
    const [invalidSeats, setInvalidSeats] = useState<EventInvalidSeatsType | null>(null);
    const eventId: number | undefined = event?.id;

    useEffect(() => {
        if (!eventId) {
            return;
        }

        (async () => {
            const result: EventInvalidSeatsType = await new GetEventInvalidSeatsQuery(axios).execute({
                eventId
            });

            setInvalidSeats(result);
        })();
    }, [eventId]);

    return (
        <>
            <h2 className='text-light-black text-[24px] font-bold leading-[1.2] mb-[3.375rem] lg:max-w-[434px] lg:w-[100%] text-center lg:text-left'>
                Verificare locuri
            </h2>

            <h3 className='text-light-black text-[18px] leading-[1.2] mb-[3.375rem] lg:max-w-[434px] lg:w-[100%] text-center lg:text-left'>
                {invalidSeats ? (invalidSeats.orderItemsOrLockedSeatsWithNoTakenAssociation.length > 0 ? 'Locurile din comenzi sau ticket locks care nu au corespondent taken in JSON-ul de sala:' : 'Toate locurile din comenzi sau ticket locks au corespondent taken in JSON-ul de sala.') : 'Se incarca...'}
            </h3>

            {(invalidSeats && invalidSeats.orderItemsOrLockedSeatsWithNoTakenAssociation.length > 0) ? (
                <p className='text-light-black text-[14px] leading-[1.2] mb-[3.375rem] lg:max-w-[434px] lg:w-[100%] text-center lg:text-left'>
                    {invalidSeats.orderItemsOrLockedSeatsWithNoTakenAssociation.join(', ')}
                </p>
            ) : null}

            <h3 className='text-light-black text-[18px] leading-[1.2] lg:max-w-[434px] lg:w-[100%] text-center lg:text-left'>
                {invalidSeats ? (invalidSeats.takenSeatsWithNoAssociation.length > 0 ? 'Locurile taken din JSON-ul de sala care nu au corespondent in comenzi sau ticket locks:' : 'Toate locurile taken din JSON-ul de sala au corespondent in comenzi sau ticket locks.') : 'Se incarca...'}
            </h3>

            {(invalidSeats && invalidSeats.takenSeatsWithNoAssociation.length > 0) ? (
                <p className='text-light-black text-[14px] leading-[1.2] mt-[3.375rem] lg:max-w-[434px] lg:w-[100%] text-center lg:text-left'>
                    {invalidSeats.takenSeatsWithNoAssociation.join(', ')}
                </p>
            ) : null}

            {(invalidSeats && invalidSeats.takenSeatsWithNoAssociation.length > 0) ? (
                <div className='w-[100%] flex items-center justify-center mt-[3.375rem]'>
                    <button
                        type="button"
                        onClick={onDeallocateTakenSeatsWithNoAssociation}
                        className='border-solid border-dark-orange border-[1px] rounded-[8px] flex items-center justify-center bg-white h-[50px] text-dark-orange text-[14px] leading-[1.5] font-medium max-w-[22.75rem] lg:w-[140px] p-1'>
                        Deblocheaza locurile taken
                    </button>
                </div>
            ) : null}
        </>
    );
};

export default ValidateEventSeats;