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';
import ProtectedRoute from '@/components/ProtectedRoute';
interface CouponProps {
    coupon: any;
}

const AddCoupon: React.FC<CouponProps> = ({ coupon }) => {
    const [isMounted, setIsMounted] = useState(false);

    const dispatch = useDispatch();

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

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

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

    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>edit</span>
                                </li>
                            </ul>
                        </div>
                        <div className="flex flex-col gap-2.5 xl:flex-row">
                            <CouponForm couponForm={couponForm} setCouponForm={setCouponForm} isCreate={false} isUpdate={true} />
                        </div>
                    </>
                )}
        </>
    );
};
export default AddCoupon;

export const getServerSideProps = async (context: any) => {
    try {
        const { params } = context;
        const { coupon } = params;
        const api_url = process.env.API_URL;

        const response = await fetch(`${api_url}api/coupons/${coupon}`);

        if (!response.ok) {
            return {
                notFound: true,
            };
        }
        const data = await response.json();
        return {
            props: {
                coupon: data,
            },
        };
    } catch (err) {
        return {
            notFound: true,
        };
    }
};