import React, { useState } from 'react';
import Image from "next/image";
import {Button, Form, Input} 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 handleChangeCheckTransaction = (e) => {
        const value = e.target.value
        setOrderId(value)
    }

    const onSubmit = async () => {
        setShow(true)
        if (show) {
            try {
                const res = await botsRepository.api.useCheckTransactionByOrderId(orderId);
                const resultTransaction = res?.data;
                setOrderNotFound(false);
                setOrder(resultTransaction);
    
            } catch (err) {
                setOrderNotFound(true);
            }
        }
    }

    console?.log(order, "ini ordernya")

    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'}>
                <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`}
                            onClick={onSubmit}
                        >
                            Cek
                        </Button>
                    )}
                </Form.Item>
            </Form>

            {orderNotFound || order === undefined ? (
                <>
                <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>
                </>
            ) : order ? (
                <>
                <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>
    )
}

export default Constraint;