"use client";

import clsx from "clsx";
import { 
    ProductOption, 
} from "@/components/catalog/type";

export default function ProductOptionsInAddToCartModal({
    productOptions,
    selected,
    disabledMap,
    onOptionClick,
}: {
    productOptions: ProductOption[];
    selected: Record<number, number>;
    disabledMap: Record<number, boolean>;
    onOptionClick: (result:{
        clickOptionId: number; 
        clickValueId: number;
    }) => void;
}) {

    const classNameOptionValueBtn = "text-ly-14 leading-ly-24 border border-solid rounded-lg pt-1.5 pb-1.5 pl-3 pr-3 bg-white";
    // 处理选项点击
    const handleOptionClick = (optionId: number, valueId: number) => {
        onOptionClick({
            clickOptionId: optionId, 
            clickValueId: valueId,
        });
    };

    return (
        <>
            this is test
            {productOptions.map((option) => { 
                return (<div key={option.id}>
                    <div className="text-ly-12 font-medium">{option.label}</div>
                    <div className="flex flex-wrap gap-3 mt-3">
                        {option.values.map((value) => { 
                            const isSelected = selected[option.id] === value.id;
                            const isDisabled = disabledMap[value.id] ? true : false;
                            return (
                                <button key={value.id}
                                    type="button"
                                    onClick={() => !isDisabled && handleOptionClick(option.id, value.id)}
                                    className={clsx(classNameOptionValueBtn, {
                                        'border-ly-green text-ly-green': isSelected,
                                        'border-black text-black': !isSelected,
                                        'opacity-40 cursor-not-allowed strokeline-bg-disabled': isDisabled
                                    })}
                                    disabled={isDisabled}
                                >
                                    {value.label}
                                </button>
                            );

                        })}
                    </div>
                </div>)
            })}
        </>
    );
}