import React, {useEffect, useState} from 'react';
import DefaultLayout from "../../../components/Layout/DefaultLayout";
import {observer} from "mobx-react-lite";
import Image from "next/image";
import {Button, Divider, Form, Input, Modal, Spin} from "antd";
import Constraint from "../../../components/Constraint";
import Ask from "../../../components/Ask";
import Location from "../../../components/Location";
import DownloadApps from "../../../components/DownloadApps";
import Sheet from 'react-modal-sheet';
import Countdown from "react-countdown";
import {useRouter} from "next/router";
import BottomSheet from "../../../components/BottomSheet";
import { botsRepository } from '../../../repository/bots';

const Payment = observer(() => {
    const [form] = Form.useForm();
    const router = useRouter();
    const { qrCode } = router.query;
    const [open, setOpen] = useState(false);
    const [openOrderOut, setOpenOrderOut] = useState(false);
    const [notOrder, setNotOrder] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [isNotComplete, setIsNotComplete] = useState(false);

    const onOpenSheet = () => setOpen(true);
    const onCloseSheet = () => setOpen(false);
    const onNotOrder = () => {
        setNotOrder(true);
        setOpenOrderOut(false);
    };

    const { data: location } = botsRepository.hooks.useGetLocationByQR(qrCode)
    console.log(location, "he")
    const renderer = ({minutes, seconds, completed}) => {
        if (completed) {
            // router.push('/flash-screen');
        } else {
            return <span>{minutes}:{seconds}</span>;
        }
    };

    return (
        <>
            {isNotComplete ? (
                <div className="flex items-center justify-center bg-[#FF4F34] h-10 text-base">
                    <span className={'text-white'}>Batas Penyelesaian Pesanan mu Habis</span>
                </div>
            ) : (
                <div className="flex items-center justify-center bg-[#00AED6] h-10 text-base">
                    <span className={'text-white'}>Selesaikan Pesanan mu dalam <Countdown
                        date={Date.now() + 300000}
                        renderer={renderer}
                        onComplete={() => {
                            setIsNotComplete(true)
                            setOpenOrderOut(true)
                        }}/>
                    </span>
                </div>
            )}

            <div className={'bg-white m-2 py-4 px-6 rounded-lg'}>
                <Location
                    location={location}
                />

                <Form form={form} layout={'vertical'}>
                    <div className={'mt-5'}>
                        <Form.Item name="phone"
                                   label={<span className={'font-semibold text-xl'}>Nomor Telepon Pembayaran</span>}
                                   rules={[
                                       {required: true, message: "Silahkan masukan Nomor Ponsel!"},
                                       {min: 10, max: 14, message: "Nomor Ponsel tidak sesuai!"},
                                   ]}>
                            <Input
                                type={'number'}
                                className={'rounded-lg'}
                                size={'large'}
                                suffix={<Image src={'/assets/icons/gopay.svg'} width={80} height={30} />}
                                placeholder={'08xxxxxxxxx'}
                                disabled={
                                    notOrder === true
                                }/>
                        </Form.Item>

                        <p>Dengan melanjutkan, saya telah membaca dan menyetujui <span
                            className={'text-[#FF9400] underline underline-offset-2 hover:cursor-pointer'}
                            onClick={() => router.push('/policy-terms')}>Syarat & Ketentuan</span> di
                            CariParkir.</p>

                        <Divider dashed className={'my-8 border-[#c1c1c1]'} style={{width: '2px 0 0'}}/>
                    </div>

                    <div className={'flex justify-between'}>
                        <h3 className={'text-lg font-bold'}>Total Pembayaran</h3>
                        <h3 className={'text-lg font-bold text-[#FF6103]'}>Rp. 99.000</h3>
                    </div>

                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                disabled={
                                    !form.isFieldsTouched(true) ||
                                    !!form.getFieldsError().filter(({ errors }) => errors.length).length ||
                                    notOrder === true
                                }
                                block
                                className={`${!form.isFieldsTouched(true) ||
                                !!form.getFieldsError().filter(({errors}) => errors.length).length || openOrderOut === true ? 'bg-[#919191]' : 'bg-black'} 
                                text-white text-xl h-12 rounded-lg`}
                                onClick={onOpenSheet}>Bayar</Button>
                        )}
                    </Form.Item>
                </Form>
            </div>

            {/*ADA KENDALA*/}
            <Constraint
                location={location}
            />

            {/*BUTUH BANTUAN*/}
            <Ask/>

            {/*DOWNLOAD APPS*/}
            <DownloadApps/>

            {/*MODAL LOADING*/}
            <Modal
                className={'rounded-lg'}
                open={isLoading}
                footer={null}
                closable={false}
                maskClosable={false}
                bodyStyle={{paddingLeft: 5, paddingRight: 5}}>
                <div className={'flex flex-col justify-center'}>
                    <Spin size={'large'}/>
                    <span className={'text-center font-semibold'}>Mohon tunggu</span>
                    <span className={'text-center text-sm'}>Saat ini pemesanan LOCKEY anda sedang di proses. </span>
                </div>
            </Modal>

            {/*CONFIRMATION SHEET*/}
            <BottomSheet onOpen={open} onClose={() => setOpen(false)}>
                <div className={'px-5 max-w-lg'}>
                    <div className={'flex justify-center'}>
                        <Image src={'/assets/images/confirmation.svg'} width={200} height={200}
                               alt={'confirmation'}/>
                    </div>

                    <h3 className={'text-lg font-bold'}>Konfirmasi Pembayaran?</h3>
                    <p>Tidak berlaku pembatalan atau pengembalian dana setelah pembayaran selesai. </p>

                    <div className={'flex justify-between gap-4'}>
                        <Button size={'large'} className={'w-full rounded-lg'}
                                onClick={onCloseSheet}>Cancel</Button>
                        <Button size={'large'} className={'w-full rounded-lg bg-black text-white'}
                                onClick={() => {
                                    setOpen(false)
                                    setIsLoading(true)
                                }}>Bayar</Button>
                    </div>
                </div>
            </BottomSheet>

            {/*ORDER OUT*/}
            <BottomSheet onOpen={openOrderOut} onClose={() => setOpenOrderOut(false)}>
                <div className={'px-5 max-w-lg'}>
                    <div className={'flex justify-center'}>
                        <Image src={'/assets/images/illustration-order-out.svg'} width={200} height={200}
                               alt={'confirmation'}/>
                    </div>

                    <h3 className={'text-lg font-bold'}>Ingin pesan kembali?</h3>
                    <p>Anda akan mendapatkan LOCKEY terbaru, jika ingin memesan kembali.</p>

                    <div className={'flex justify-between gap-4'}>
                        <Button size={'large'} className={'w-full rounded-lg'}
                            onClick={onNotOrder}>Tidak</Button>
                        <Button
                            size={'large'}
                            className={'w-full rounded-lg bg-black text-white'}
                            onClick={() => router.push(`/${qrCode}/order`)}
                        >
                            Pesan Ulang
                        </Button>
                    </div>
                </div>
            </BottomSheet>
        </>
    )
})

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

export default Payment;