import React, {useEffect} 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 { 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);
                store.lockey.createOrder({
                    lockeyId: isAvailable.id
                })
                    .then(res => {
                        router.push(`/${qrCode}/payment-order/`)
                    })
            } else if (isNotAvailable) {
                localStorage.setItem("lockey_id", isNotAvailable?.id)
                localStorage.setItem("location_name", isNotAvailable?.location_name);
                router.push('/not-available');
            }
            console.log(isAvailable, "jj")
        }
    }, [router.isReady, listLockeys])

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

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

export default FlashScreen;
