import React, {useEffect, useState} from 'react';
import DefaultLayout from "../../../components/Layout/DefaultLayout";
import { useRouter } from 'next/router';
import { Image } from 'antd';
import { botsRepository } from '../../../repository/bots';
import {useStore} from "../../../components/StoreProvider";
import { observer } from 'mobx-react-lite';

const FlashScreen = observer(() => {
    const router = useRouter();
    const store = useStore()
    const [startOrder, setStartOrder] = useState(false)

    setTimeout(() => {
        setStartOrder(true)
    }, 3000)

    const { qrCode } = router.query;

    const { data: listLockeys } = botsRepository.hooks.useGetAllLockey(qrCode);

    useEffect(() => {
        if (router.isReady && listLockeys?.data?.length > 0) {
            const isAvailable = listLockeys?.data?.find(lockey => lockey.lockey_status?.description.toLowerCase() === "tersedia");
            const isNotAvailable = listLockeys?.data?.find(lockey => lockey?.lockey_status?.description?.toLowerCase() === "LOCKEY Mati");

            if (isAvailable) {
                localStorage.setItem("lockey_id", isAvailable?.id)
                localStorage.setItem("location_name", isAvailable?.location_name);
                localStorage.setItem("price", isAvailable?.price)
                if (startOrder) {
                    store.lockey.createOrder({
                        lockeyId: isAvailable.id
                    })
                        .then(res => {
                            router.push(`/${qrCode}/payment-order/`)
                            localStorage.setItem("idOrder", res?.data?.id)
                            localStorage.setItem("checkInTime", res?.data?.check_in_time)
                            localStorage.setItem("validTime", res?.data?.valid_time)
                            console.log(res, "data order")
                        })
                } else {
                    console.log("loading")
                }
            } else if (isNotAvailable) {
                localStorage.setItem("lockey_id", isNotAvailable?.id)
                localStorage.setItem("location_name", isNotAvailable?.location_name);
                router.push('/not-available');
            }
            console.log(isAvailable, "jj")
        }
    }, [startOrder])

    return (
        <>
            <div className='relative flex flex-col justify-center items-center pt-[172px] lg:pt-20'>
                <Image src='/assets/images/cariparkir3.svg' preview={false} alt={'logo cariparkir'} />
                <div className='flex items-center gap-6 mt-6'>
                    <span>Only pay with</span>
                    <Image src='/assets/images/gopay.svg' preview={false} alt={'gopay'} />
                </div>
            </div>
            <div className={'hidden md:flex justify-center items-center absolute bottom-0 w-full'}>
                <Image src='/assets/images/flash-screen2.png' preview={false} alt={'bg flash screen'} />
            </div>
            <div className={'flex justify-center items-center absolute bottom-0 w-full md:hidden'}>
                <Image src='/assets/images/flash-screen.svg' preview={false} alt={'bg flash screen'} />
            </div>
        </>
    )
})

FlashScreen.getLayout = function Layout(page) {
    return <DefaultLayout isGradient={false}>
        {page}
    </DefaultLayout>;
};

export default FlashScreen;