import React, {useEffect, useState} from 'react';
import DefaultLayout from "../../../components/Layout/DefaultLayout";
import {observer} from "mobx-react-lite";
import {Button, Divider, Form, Image, 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, { zeroPad } from "react-countdown";
import {useRouter} from "next/router";
import BottomSheet from "../../../components/BottomSheet";
import { botsRepository } from '../../../repository/bots';
import { useStore } from '../../../components/StoreProvider';
import { format } from 'date-fns';
import Link from 'next/link';

const Payment = observer(() => {
    const [form] = Form.useForm();
    const router = useRouter();
    const store = useStore();
    const { qrCode } = router.query;
    const [orderId, setOrderId] = useState('');
    const [price, setPrice] = useState(0);
    const [checkInTime, setCheckInTime] = useState('');
    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)

    const expiredOrder = async () => {
        try {
            await botsRepository.api.updateStatusExpiredOrder(orderId)
            setIsNotComplete(true)
            setOpenOrderOut(true)
        } catch (err) {
            console.log("session epxired failed")
            setIsNotComplete(true)
            setOpenOrderOut(true)
        }
    }

    const renderer = ({minutes, seconds, completed}) => {
        if (completed) {
            console.log("session complite")
        } else {
            return <span>{zeroPad(minutes)}:{zeroPad(seconds)}</span>;
        }
    };

    useEffect(() => {
        if (typeof window !== undefined) {
            let price = localStorage.getItem("price");
            let getCheckInTime = localStorage.getItem("checkInTime");
            let orderId = localStorage.getItem("idOrder")
            setOrderId(orderId);
            setPrice(price)
            const checkInTime = format(new Date(getCheckInTime), "mm")
            console.log(checkInTime, "time")
        }
    }, [])

    const handleSubmitPhoneNumber = async () => {
        try {
            const values = await form.validateFields();
            setOpen(false);
            setIsLoading(true);
            
            const body = {
                phoneNumber: values.phoneNumber,
            };

            await store.lockey.createPayment(body);
            form.resetFields();
            setIsLoading(false)
        } catch (err) {
            console.log(err);
            setIsLoading(false);
        }
    }

    return (
        <>
            {isNotComplete ? (
                <div className="flex items-center justify-center bg-[#FF4F34] h-10 text-base">
                    <span className={'text-white'}>Batas Penyelesaian pesanan Anda Habis</span>
                </div>
            ) : (
                <div className="flex items-center justify-center bg-[#00AED6] h-10 text-base">
                    <span className={'text-white'}>selesaikan pesananmu dalam <Countdown
                        date={Date.now(checkInTime) + 300000}
                        renderer={renderer}
                        onComplete={expiredOrder}/>
                    </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="phoneNumber"
                                   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} preview={false} alt={'icon gopay'} />}
                                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. {price}</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-3xl'}
                open={isLoading}
                footer={null}
                closable={false}
                maskClosable={false}
                bodyStyle={{paddingLeft: 5, paddingRight: 5}}>
                <div className={'flex flex-col justify-center items-center'}>
                    <div className='flex justify-center items-center'>
                        <Image src={'/assets/icons/Load_Logo_CP.gif'} width={35} height={48} alt={'gif'} preview={false} />
                    </div>
                    <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'} preview={false} />
                    </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'} htmlType={'submit'} className={'w-full rounded-lg bg-black text-white'}
                            onClick={handleSubmitPhoneNumber}>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'} preview={false} />
                    </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;