"use client";


import {useConfig} from "@/utils/hooks/useConfig";
import { useCustomToast } from "@/utils/hooks/useToast";
import {useSaveCheckoutCart} from "@/utils/hooks/useSaveCheckoutCart";
import { formatCartDetail } from "@/utils/cartDetailTools";
import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
import {CartDetail} from "@/types/cart/type";

/**
 * 先通过 shippingInsuranceEnabled 判断网站是否开通丢件险功能
 * 再通过 useShippingInsurance 判断用户是否勾选丢件险 
 */

export default function LostInsurance({
    cartData,
    onSwitchInsurance
}: {
    cartData: CartDetail
    onSwitchInsurance: (payload:CartDetail) => void;
}) {

    const {getCurrentCurrencyItem} = useConfig();
    const currentCurrency = getCurrentCurrencyItem();
    const currencySymbol = currentCurrency.symbol;
    const { showToast } = useCustomToast();
    const {saveCheckoutCart} = useSaveCheckoutCart();
    const clickSwitchButton = async (bool: boolean) => {
        let isInsurance = bool ? '1' : '';
        await setInsurance(isInsurance);
    };
    const setInsurance = async (insurance: string) => {
        overlayLoading.start();
        const saveRes = await saveCheckoutCart({ 
            useShippingInsurance: insurance
        });
        overlayLoading.stop();
        if(!saveRes.error) {
            if(saveRes.data) {
                const newCartDetail = formatCartDetail(saveRes.data);
                onSwitchInsurance(newCartDetail);
            }
            return true;
        } else {
            showToast(saveRes.msg, 'danger');
            return false;
        }
    };

    let title = "";
    if(cartData.shippingInsuranceType === "percentage") {
        title = `${cartData.shippingInsuranceValue}% Package Insurance`;
    } else if(cartData.shippingInsuranceType === "fixed") {
        //title = `${currencySymbol}${cartData.shippingInsuranceAmount} Package Insurance`;
        title = `Fixed $${cartData.shippingInsuranceValue} Package Insurance`;
    }
    return (<>
        <div className="relative box-border w-full bg-[#F9F9F9] p-3">
            <div className="flex justify-between items-center">
                <span className="text-ly-13">
                    {title}
                </span>
                <span className="text-ly-12">
                    {cartData.formattedShippingInsuranceAmount}
                </span>
            </div>
            <div className="mt-2 w-57 text-ly-12 leading-3.5 text-ly-placeholder">
                Increased compensation for courier packages issued within 30 days.
            </div>
            <div className="absolute bottom-3 right-3 flex justify-between items-center">
                <label className="group relative w-9 h-5.5 flex-none">
                    <input className="absolute w-full h-full top-0 left-0 opacity-0 z-10"
                        type="checkbox" checked={cartData.useShippingInsurance}
                        onChange={(e) => clickSwitchButton(e.target.checked)}
                    />
                    <span className="transition-all box-border block px-0.5 w-full h-full rounded-full flex items-center bg-[#c2c2c2] group-has-[:checked]:bg-[#363636]">
                        <span className="transition-all block w-4.5 h-4.5 rounded-full bg-white group-has-[:checked]:ml-3.5"></span>
                    </span>
                </label>
                
            </div>

            
        </div>
        
    </>);
}