import React, { useState } from 'react'
import "./Reason_cancelling_field_holder.css"
import { Form } from 'react-bootstrap'
import Green_Btn from '../common_btn/green_btn/Green_Btn'
import Gray_Btn from '../common_btn/gray_btn/Gray_Btn'
import Success_Modal from '../common_modal/success_modal/Success_Modal'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { cancelOrder, returnOrder } from '../../../features/order/orderSlice'

function Reason_cancelling_field_holder({
    setCancelReason,
    cancelReason,
    cancelReasonId,
    selectedItems,
    order,
    error,
    setError,
    type,
}) {

    const navigate = useNavigate();
    const [showSuccessModal, setShowSucsessModal] = useState(false)


    const dispatch = useDispatch();
    const [modalShow, setModalShow] = React.useState(false);
    const handleClick = () => {
        setShowSucsessModal(true);
        navigate("/");
        setTimeout(() => {
            setModalShow(false);
        }, 3000);
    };
    const onSubmit = async () => {
        const data = {
            message: cancelReason,
            products: selectedItems,
        };

        let res;
        if (type === "Return") {
            if (cancelReasonId === null) {
                setError("Return Reason Required");
                return;
            }
            if (selectedItems.length === 0) {
                setError("Select product to Return");
                return;
            }
            data.return_reason_id = cancelReasonId;
            res = await dispatch(returnOrder({ order_id: order?.id, data }));
        }

        if (type === "Cancel") {
            if (cancelReasonId === null) {
                setError("Cancel Reason Required");
                return;
            }
            if (selectedItems.length === 0) {
                setError("Select product to Return");
                return;
            }
            data.cancel_reason_id = cancelReasonId;
            res = await dispatch(cancelOrder({ order_id: order?.id, data }));
        }

        if (res.meta?.requestStatus === "fulfilled") {
            handleClick();
        } else if (res.meta?.requestStatus === "rejected") {
            // Optionally handle error here
        }
    };

    return (
        <>
            <section className='Reason_cancelling_field_holder'>
                <Form>
                    <Form.Group className="input_group  mb-3" controlId="exampleForm.ControlTextarea1">
                        <Form.Label>Could you tell us a reason for cancelling? (optional)</Form.Label>
                        <Form.Control as="textarea" placeholder='Type a reason' rows={1} />
                    </Form.Group>
                    <div className='btn_holder'>
                        <Green_Btn btn_name={"Submit"} onClick={() => {
                            setShowSucsessModal(true)

                            setTimeout(() => {
                                setShowSucsessModal(false)
                                navigate("/my-orders")
                            }, 3000);

                        }} />
                        <Gray_Btn btn_name={"Cancel"} />
                    </div>
                </Form>
            </section>

            <Success_Modal
                show={showSuccessModal}
                onHide={() => { setShowSucsessModal(false) }}
                successText="Order canceled successfully!"
            />

        </>
    )
}

export default Reason_cancelling_field_holder
