import React, { useRef, useState } from 'react';
import Image from "next/image";
import {Button, Form, Input, Spin} from "antd";
import Transaction from "../Transaction";
import { botsRepository } from '../../repository/bots';

const Constraint = ({ location }) => {
    const [form] = Form.useForm();
    const [orderId, setOrderId] = useState('');
    const [order, setOrder] = useState('');
    const [orderNotFound, setOrderNotFound] = useState(false);
    const [show, setShow] = useState(false)
    const [loading, setLoading] = useState(false)
    const inputRef = useRef(null)

    const handleChangeCheckTransaction = (e) => {
        const value = e.target.value
        setOrderId(value)
    }

    const onSubmit = async () => {
        try {
            setLoading(true)
            const value = await form.getFieldValue()
            if (inputRef.current) {
                setShow(true)
            }
            const res = await botsRepository.api.useCheckTransactionByOrderId(value?.order_id);
            const resultTransaction = res?.data;
            setOrderNotFound(false);
            setOrder(resultTransaction);
            setTimeout(() => {
                setLoading(false)
            }, 1000);

        } catch (err) {
            if (err) {
                setLoading(false)
            }
            setOrderNotFound(true);
        }
    }

    return (
        <div className={'bg-white px-7 pt-4 pb-8 mt-6'}>
            <Image src={'/assets/images/logo.svg'} width={100} height={50} />

            <h3 className={'text-lg font-bold'}>Ada kendala dengan transaksimu?</h3>
            <p>Cek transaksi dengan Order ID pembayaran:</p>

            <Form form={form} layout={'vertical'} onFinish={onSubmit}>
                <Form.Item name="order_id" rules={[
                    { required: true, message: "Silahkan masukan Order ID!" },
                ]}>
                    <Input
                        className={'rounded-lg'}
                        size={'large'}
                        placeholder={'CB-20220924-IaNr'}
                        value={orderId}
                        onChange={handleChangeCheckTransaction} />
                </Form.Item>

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

            {orderNotFound || order === undefined ? (
                loading ? (<Spin className='flex justify-center'/>) : (
                    <div>                
                        <h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>

                        <div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
                            <Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
                            <div className={'flex flex-col'}>
                                <span className={'font-semibold'}>{orderId}</span>
                                <span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
                            </div>
                        </div>
                    </div>
                )
            ) : order ? (
                loading ? (<Spin className='flex justify-center'/>) : (
                    <div>
                        <h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>

                        <div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
                            <Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
                            <div className={'flex flex-col'}>
                                <span className={'font-semibold'}>{orderId}</span>
                            </div>
                        </div>
                        <Transaction
                            show={show}
                            orderData={order}
                            location={location}
                        />
                    </div>
                )
            ) : ''}
        </div>
    )
}

export default Constraint;