import { setPageTitle } from '@/store/themeConfigSlice';
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import CouponForm from '@/components/Coupons/Form';
import Link from 'next/link';
const AddCoupon = () => {
    const [isMounted, setIsMounted] = useState(false);

    const dispatch = useDispatch();

    useEffect(() => {
        setIsMounted(true);
    }, []);

    useEffect(() => {
        dispatch(setPageTitle('Coupon Add'));
    }, []);

    const [couponForm, setCouponForm] = useState<any>({
        coupon_name: '',
        coupon_title: '',
        coupon_description: '',
        coupon_type: 'fixed',
        coupon_amount: '',
        coupon_is_individual: true,
        coupon_is_limited: false,
        coupon_limit: 0,
        coupon_categories: [],
        coupon_start_date: null,
        coupon_end_date: null,
        include_product_categories: [],
        exclude_product_categories: [],
        coupon_min_purchase: 0,
        coupon_is_max_disc: false,
        coupon_max_amount_disc: 0,
        coupon_free_item_name: '',
        coupon_free_item_products: [],
        coupon_is_unique_user: false,
        coupon_is_noticed: false,
        coupon_notice_desc: '',
        coupon_is_highlight: false,
        coupon_is_public: true,
        excluded_products: [],
        included_products: [],
    });

    return (
        <>
            {isMounted && (
                    <>
                        <div className="mb-3">
                            <ul className="flex space-x-2 rtl:space-x-reverse">
                                <li>
                                    <Link href="/coupons" className="text-primary hover:underline">
                                        Coupons
                                    </Link>
                                </li>
                                <li className="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                                    <span>new</span>
                                </li>
                            </ul>
                        </div>
                        <div className="flex flex-col gap-2.5 xl:flex-row">
                            <CouponForm couponForm={couponForm} setCouponForm={setCouponForm} isCreate={true} isUpdate={false} />
                        </div>
                    </>
                )}
        </>
    );
};
export default AddCoupon;