nshop-front-pc/src/components/common/AddToCartModal/AddToCartModal.tsx

"use client";

import { useState, useMemo } from "react";
import { useRouter } from "next/navigation";
import type { Swiper as SwiperType } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode, Navigation, Thumbs, Pagination } from 'swiper/modules';
import Big from 'big.js';
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { useCustomToast } from "@utils/hooks/useToast";
import { 
    closeAddToCartDialog, 
    clearAddToCartProduct 
} from '@/store/slices/addToCartDialogSlice';
import { useAddProduct } from "@utils/hooks/useAddToCart";
import {useStore} from "@/utils/hooks/useConfig";
import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
import type { 
    ProductOption, 
    ResolvedVariant 
} from "@/components/catalog/type";
import CommonModal from "@/components/theme/ui/CommonModal";
import ProductOptionsInAddToCartModal from "./ProductOptionsInAddToCartModal";
import { Price } from "@components/theme/ui/Price";
import {
    isValueAvailable,
    isOptionValueAvailable,
    getFirstAvailable,
    getAvailableVariants,
    isCombinationAvailable,
    formatFlexibleVariants,
    findNearestAvailableVariant
} from "@/utils/variantTools";

export default function AddToCartModal() {
    const router = useRouter();
    const dispatch = useAppDispatch();

    const {store} = useStore();
    const currentCurrencyCode = store.currentCurrency;

    const {isOpen, product} = useAppSelector((state) => state.addToCartDialog);

    const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);

    const { appendProductToCart } = useAddProduct();
    const { showToast } = useCustomToast();

    const images = useMemo(() => {
        return product?.images?.edges.map((item) => {
            return item.node;
        }) ?? [];
    },[product?.images]);
    const flexibleVariants = useMemo(() => {
        return formatFlexibleVariants(product?.flexibleVariants);
    },[product?.flexibleVariants]);

    const productOptions: ProductOption[] = useMemo(() => {
        const opts = product?.productOptions;
        return opts ? JSON.parse(opts) : [];
    },[product?.productOptions]);

    // 获取所有可用变体
    const availableVariants = useMemo(() => {
        return getAvailableVariants(flexibleVariants);
    },[flexibleVariants]);

    const isSaleable = product?.isSaleable;

    const [productQty] = useState(1);


    // 记录当前哪个选项组刚刚被点击（用于实现“点击组内全部可点”）
    const [lastClickedOptionId, setLastClickedOptionId] = useState<number>(productOptions[0]?.id );
  
    // 当前选中的选项值映射：option_id -> value_id
    // useEffect和useMemo的执行时机不同，useMemo早于useEffect(useEffect在浏览器绘制后执行)执行，
    // useLayoutEffect早于useEffect执行，useLayoutEffect在浏览器绘制之前执行（官方说会阻塞浏览器绘制）
    const [selected, setSelected] = useState<Record<number, number>>(() => {
        // if (Object.keys(selected).length === 0) {
            let res: Record<number, number> = {};
            const defaultSelected = getFirstAvailable(productOptions, flexibleVariants);
            if (defaultSelected) {
                res = defaultSelected;
            } else {
                // 极端情况：没有任何可用组合，默认全选每组第一个（但仍需标记为不可用，由禁用逻辑处理）
                productOptions.forEach((opt) => {
                    res[opt.id] = opt.values[0]?.id;
                });
            }
            console.log('set default selected ---- ', res);
            return res;
        // }
    });

    // 计算每个选项值的禁用状态
    const disabledMap = useMemo(() => {
        const map: Record<number, boolean> = {};
        if (Object.keys(selected).length === 0) return map; // 没有选中的项

        productOptions.forEach((option) => {
            option.values.forEach((value) => {
                // 规则：如果该选项组是最近点击的组，校验组中的值是否存在可用变体
                if (option.id === lastClickedOptionId) {
                    //   map[value.id] = false;
                    map[value.id] = !isValueAvailable(value.id,availableVariants);
                } else {
                    // 校验其他组的选项值是否可用
                    map[value.id] = !isOptionValueAvailable(
                        option.id,
                        value.id,
                        selected,
                        productOptions,
                        availableVariants
                    );
                }
            });
        });
        return map;
    }, [selected, lastClickedOptionId, productOptions, availableVariants]);
    
    // 判断当前选中的组合是否可购买（用于控制购买按钮等）
    const isCurrentSelectionAvailable = useMemo(() => {
        let res = true;
        if(isSaleable !== '1') {
            res = false;
        } else {
            const selectedIds = Object.values(selected);
            if (selectedIds.length !== productOptions.length) {
                res = false
            } else {
                res = isCombinationAvailable(selectedIds, availableVariants);
            }
        }
        return res;
    }, [selected, productOptions, availableVariants, isSaleable]);
    
    // 获取当前选中变体和价格等信息
    const currentVariantInfo: {variant:ResolvedVariant | null; totalLinePrice: number; totalNowPrice: number; save: number;} = useMemo(() => {
        const selectedIds = Object.values(selected);
        let totalLinePrice = 0;
        let totalNowPrice = 0;
        let save = 0;
        const variant = flexibleVariants.find((v) => {
            const vIds = v.optionValues.map((ov) => ov.id);
            return selectedIds.length === vIds.length && selectedIds.every((id) => vIds.includes(id));
        });
        if (selectedIds.length === 0 || variant === undefined) {
            // 尚未初始化，返回一个安全占位对象
            return { variant: null, totalLinePrice: 0, totalNowPrice: 0, save: 0 };
        }
        if(variant.priceIndices && variant.priceIndices.length > 0) {
            totalLinePrice = Big(variant.priceIndices[0].regular_min_price).times(productQty).toNumber();
            totalNowPrice = Big(variant.priceIndices[0].min_price).times(productQty).toNumber();
        }
        if(totalLinePrice !== totalNowPrice) {
            save = Big(totalNowPrice).minus(totalLinePrice).toNumber(); 
        }

        return {
            variant, 
            totalLinePrice: totalLinePrice, 
            totalNowPrice: totalNowPrice,
            save: save
        };
    }, [selected, flexibleVariants, productQty]);



    const handleOptionClick = (result:{
        clickOptionId: number; 
        clickValueId: number;
    }) => {
        // 更新前需要判断当前选中的组合是否可以购买，如果可以购买正常更新；如果不能购买查找可以购买的组合然后更新
        const {clickOptionId: optionId, clickValueId: valueId} = result;
        let newSelected: Record<number, number> = {...selected,[optionId]: valueId};
        const selectedValueIds = Object.values(newSelected);
        if(!isCombinationAvailable(selectedValueIds, availableVariants)) {
            newSelected = findNearestAvailableVariant(optionId,valueId,{...newSelected},productOptions,availableVariants);
        }

        setSelected(newSelected);
        // 记录当前点击的选项组
        setLastClickedOptionId(optionId);
    };

    async function addProductToCart() {
        if(!product) {
            showToast("Get product detail failed!", "danger");
            return;
        }
        overlayLoading.start(); 
        const params = { 
            productId: product._id, 
            quantity: productQty,
            variantId: currentVariantInfo.variant?._id,
        };
        const res = await appendProductToCart({
            productId: params.productId,
            quantity: params.quantity,
            variantId: params.variantId
        });
        console.log('onAddToCart run ----- 1',res);
        overlayLoading.stop();
        return res;
    } 

    const addToCartHandler = async () => {
        if(!isCurrentSelectionAvailable) {
            showToast("The selected options are not available!", "warning");
            return;
        }

        if(currentVariantInfo.variant) {
            await addProductToCart();
            closeModal();
        }
    };
    const buyNowHandler = async () => {
        if(!isCurrentSelectionAvailable) {
            showToast("The selected options are not available!", "warning");
            return;
        }

        if(currentVariantInfo.variant) {
            const res = await addProductToCart();
            closeModal();
            if(res && !res.error) {
                const responseData = res.data;
                if(responseData && responseData.success) {
                    router.push('/checkout');
                }
            }
        }
    };

    const closeModal = () => {
        dispatch(closeAddToCartDialog());
        setTimeout(() => {
            dispatch(clearAddToCartProduct());
        }, 300);
    };

    return (<>
        <CommonModal 
            isOpen={isOpen}
            onClose={closeModal}
            fullyCustomer={true}
            contentClassName="min-w-155 max-w-248.5"
            body={
                <div className="box-border w-full p-6 bg-white rounded-xl">
                    <div className="flex justify-end">
                        <button className="flex-none w-6 h-6" onClick={closeModal}>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" className="h-6 transition-all ease-in-out hover:scale-110"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
                        </button>
                    </div>
                    <div className="box-border mt-1.5 grid h-134 w-full min-w-0 grid-cols-[76px_minmax(0,1fr)_461px]">
                        
                        <div className="min-w-0 h-full">
                            <Swiper
                                onSwiper={setThumbsSwiper}
                                spaceBetween={10}
                                slidesPerView={5}
                                freeMode={true}
                                watchSlidesProgress={true}
                                modules={[FreeMode, Navigation, Thumbs]}
                                direction={'vertical'}
                                className="w-full h-134 min-w-0 addtocartmodal-thumb-swiper"
                            >
                                {images.map((img) => {
                                    return (
                                    <SwiperSlide key={img.id + '_thumbs'} className="box-border h-25 rounded-xs p-0.5 border border-white [&.swiper-slide-thumb-active]:border-ly-middlegreen">
                                        <img className="block w-full h-full object-cover"  src={img.publicPath} />
                                    </SwiperSlide>
                                    );
                                })}
                                
                            </Swiper>
                        </div>
                        <div className= "relative max-w-100.5 min-w-0 h-full ml-2">
                            <Swiper
                                navigation={{
                                    nextEl: '.addtocartmodal-main-swiper-next-btn',
                                    prevEl: '.addtocartmodal-main-swiper-prev-btn',
                                    disabledClass: 'disable'
                                }}
                                pagination={{
                                    type: "fraction",
                                    renderFraction: function (currentClass, totalClass) {
                                        return '<span class="' + currentClass + '"></span>' +'/' +'<span class="' + totalClass + '"></span>';
                                    },
                                }}
                                thumbs={{ swiper: thumbsSwiper }}
                                modules={[Navigation, Thumbs,Pagination]}
                                className="addtocartmodal-main-swiper w-full h-full min-w-0"
                            >
                                {images.map((img) => {
                                    return (
                                    <SwiperSlide key={img.id}>
                                        <img className="block w-full h-full object-cover"  src={img.publicPath} />
                                    </SwiperSlide>
                                    );
                                })}
                                
                            </Swiper>
                            <button className="addtocartmodal-main-swiper-prev-btn group [&.disable]:bg-black/50 bg-white z-1 absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full">
                                <svg className="w-6 h-6 stroke-black group-[.disable]:stroke-white" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none"><path strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M15 18L9 12L15 6"></path></svg>
                            </button>
                            <button className="addtocartmodal-main-swiper-next-btn group [&.disable]:bg-black/50 bg-white z-1 absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full">
                                <svg className="w-6 h-6 stroke-black group-[.disable]:stroke-white" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none"><path strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M9 18L15 12L9 6"></path></svg>
                            </button>
                        </div>
                                
                        
                        <div className="box-border px-5 min-w-0 ml-4 flex flex-col">
                            <div className="flex-none">
                                <div className="text-ly-14 leading-5 line-clamp-2">
                                    {product?.name}
                                </div>
                                <div className="mt-4 flex items-center">

                                    {/*<Price 
                                        className="text-ly-14 bg-ly-gold py-0.5 px-1"
                                        amount={String(currentVariantInfo.save)} 
                                        currencyCode="USD"
                                    /> */}
                                    <Price 
                                        className="text-ly-24 font-bold"
                                        amount={currentVariantInfo.totalNowPrice} 
                                        currencyCode={currentCurrencyCode}
                                    />
                                    <Price 
                                        className="text-ly-14 text-ly-gray line-through ml-2.5"
                                        amount={currentVariantInfo.totalLinePrice} 
                                        currencyCode={currentCurrencyCode}
                                    />
                                    
                                </div>
                            </div>
                            <div className="flex-auto my-6 max-h-92 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-100">
                                
                                <ProductOptionsInAddToCartModal 
                                    productOptions={productOptions}
                                    selected={selected}
                                    disabledMap={disabledMap}
                                    onOptionClick={handleOptionClick}
                                />
                            </div>
                            <div className="flex-none">
                                <div className="flex justify-between gap-3">
                                    <button className="flex-1 flex justify-center items-center h-12 text-ly-16 font-bold text-white rounded-3xl bg-ly-deepgreen" 
                                        type="button"
                                        onClick={buyNowHandler}
                                    >
                                        Buy now
                                    </button>
                                    <button className="flex-1 flex justify-center items-center h-12 text-ly-16 font-bold text-white rounded-3xl bg-ly-middlegreen" 
                                        type="button"
                                        onClick={addToCartHandler}
                                    >
                                        Add to bag
                                    </button>
                                </div>
                                {/* <button className="flex justify-center items-center w-full mt-3.75 h-12 text-ly-16 font-bold text-white rounded-3xl bg-[#ffc43a]" type="button">
                                    <img className="h-6 w-18.75" src="/image/payment/paypal-logo.svg" />
                                </button> */}
                            </div>
                        </div>
                    </div>
                </div> 
                
            }
        />
    </>);
}