"use client"
import { useState } from 'react';
import {  Form } from 'antd';
import AppModal from '@/components/UiComponents/Modal/AppModal';
import { CancelOrderIcon } from '@/assets/svgs/Icons';
import AppForm from '@/components/UiComponents/forms/AppForm';
import OrderProductItem from './OrderProductItem';
import { useTranslations } from 'next-intl';
import toast from 'react-hot-toast';
import axiosInstance from '@/services/axiosClient';
import { showDynamicSwal } from '@/utils/helpers';
import Success from "@/assets/images/success2.gif";
import { useRouter } from 'next/navigation';

interface CancelOrderModalProps {
    products:any[];
    order_number:string
}

const CancelOrderModal = ({products,order_number}:CancelOrderModalProps) => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [isOPen,setIsOPen] = useState(false)
    const [current, setCurrent] = useState(0);
    const [selectedCanceledProducts, setSelectedCanceledProducts] = useState<string[]>([]);
    const t = useTranslations();
    const router = useRouter();

    const toggleCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { checked, id } = e.target;
        setSelectedCanceledProducts((prev) => checked ? [...prev, id] : prev.filter((product) => product !== id) );
    };
    
    const handleClose = ()=>{
        setIsOPen(false)
        setCurrent(0);
        form.resetFields();
    }

    const fields = [
        {
        type: "textarea",
        name: "reason",
        label: t("form.reason"),
        placeholder: t("form.reasonPlaceholder"),
        inputProps:{
            cols:5
        }
        },
    ];

    const handleSelectStep = (values:any) =>{
        if(selectedCanceledProducts.length > 0){
            setCurrent(current + 1)
        }else{
            toast.error(t("validation.select_item"))
        }
    }
    

    const handleSubmit = async (values:any) =>{
        try{
            setLoading(true)
            const res = await axiosInstance.patch(`/orders/${order_number}/cancel`,{
                ...values,
                ...(selectedCanceledProducts.length !== products.length ? {items:selectedCanceledProducts}:[])
            })
            if(res){
                router.push("/account/orders")
                await showDynamicSwal({
                    title: t("orders.cancel_order_sec"),
                    imageUrl: `${Success.src}`,
                    text: "",
                    showCancelButton: false,
                    showConfirmButton: false,
                    timer: 1500,
                    customClass: {
                        title: "swal-title",
                        text: "hidden",
                    },
                });
            }
        }catch(error:any){
            toast.error(error?.response?.data?.message);
        }finally{
            setLoading(false)
        }
    }

    const steps = [
        {
            desc:t("Text.select_cancelled_products"),
            form:(
                <div className='w-full'>
                    <div className="h-[400px] overflow-y-auto">
                        {products.map((item) => <OrderProductItem item={item} key={`order-item-${item?.id}`} withCheckBox toggleCheckbox={toggleCheckbox}/>)}
                    </div>
                    <button onClick={handleSelectStep} className='app-btn w-full mt-5'>{t("buttons.confirm")}</button>
                </div>
            )
        },
        {
            icon : <CancelOrderIcon/>,
            desc:t("Text.CANCEL_ORDER_DESC"),
            form:(
                <AppForm
                    fields={fields}
                    onFinish={handleSubmit}
                    loader={loading}
                    form={form}
                    btnClass='full-modal-btn'
                    fromBtn='buttons.confirm'
                    formClass='w-full'
                />
            )
        }
    ]

    return (
        <>
            <div className="order-details-card">
                <button 
                    onClick={()=>setIsOPen(true)} 
                    className="app-btn w-full"
                >
                    {t("Text.CANCEL_ORDER")}
                </button>
            </div>
            <AppModal
                footer={false} 
                centered 
                isModalVisible={isOPen}
                onCancel={handleClose}
            >
                <div className='flex flex-col items-center gap-6 justify-center w-full pt-6  '>
                    {steps[current].icon}
                    <div className='text-center'>
                        <h3 className='text-2xl font-bold mb-4'>{t("Text.CANCEL_ORDER")}</h3>
                        {steps[current].desc && <p className='text-gray-300 font-semibold'>{steps[current].desc}</p>}
                    </div>
                    {steps[current].form}
                </div>
            </AppModal>
        </>
    );
};

export default CancelOrderModal;