/**
 * VariantSelector – full variant selector for product detail pages
 *
 * Three render modes per option:
 * - swatch: color circles (auto-detected for "Color" option or when colorMap provided)
 * - button: rectangular buttons (default for most options)
 * - dropdown: <select> for options with many values
 */
import React, { useEffect } from "react";
import { clsx } from "clsx";
import { CustomSelect } from "./CustomSelect";
import { ensureSeekoraStyles } from "../../styles/inject";
const COLOR_NAMES = {
    black: "#000",
    white: "#fff",
    red: "#ef4444",
    blue: "#3b82f6",
    green: "#22c55e",
    yellow: "#eab308",
    orange: "#f97316",
    purple: "#a855f7",
    pink: "#ec4899",
    brown: "#92400e",
    grey: "#6b7280",
    gray: "#6b7280",
    navy: "#1e3a5f",
    beige: "#d4c5a9",
    cream: "#fffdd0",
    ivory: "#fffff0",
    teal: "#0d9488",
    coral: "#ff7f50",
    maroon: "#800000",
    charcoal: "#36454f",
    sage: "#9caf88",
    lavender: "#e6e6fa",
    mint: "#98fb98",
    rust: "#b7410e",
    plum: "#8e4585",
    slate: "#708090",
    indigo: "#4b0082",
    gold: "#ffd700",
    silver: "#c0c0c0",
    rose: "#ff007f",
    raven: "#0a0a0a",
    natural: "#f5f0e1",
    bone: "#e3dac9",
    sand: "#c2b280",
    olive: "#808000",
    khaki: "#c3b091",
    burgundy: "#800020",
    wine: "#722f37",
    mauve: "#e0b0ff",
    tan: "#d2b48c",
};
const isColorOption = (name) => {
    const lower = name.toLowerCase();
    return (lower === "color" ||
        lower === "colour" ||
        lower === "colors" ||
        lower === "colours");
};
const resolveColor = (value, colorMap) => {
    if (colorMap?.[value])
        return colorMap[value];
    const lower = value.toLowerCase();
    if (colorMap?.[lower])
        return colorMap[lower];
    return COLOR_NAMES[lower] ?? null;
};
const getAvailability = (optionName, value, options, variants, selections) => {
    const optionIndex = options.findIndex((o) => o.name === optionName);
    if (optionIndex === -1)
        return true;
    const optionKey = `option${optionIndex + 1}`;
    return variants.some((variant) => {
        if (variant[optionKey] !== value)
            return false;
        if (variant.available === false)
            return false;
        for (const [selName, selValue] of Object.entries(selections)) {
            if (selName === optionName)
                continue;
            const selIdx = options.findIndex((o) => o.name === selName);
            if (selIdx === -1)
                continue;
            const selKey = `option${selIdx + 1}`;
            if (variant[selKey] !== selValue)
                return false;
        }
        return true;
    });
};
export function VariantSelector({ options, variants, selections, onSelectionChange, optionRenderModes, dropdownThreshold = 8, colorMap, showAvailability = true, selectedVariant: _selectedVariant, className, style, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    if (!options || options.length === 0)
        return null;
    const getRenderMode = (option) => {
        if (optionRenderModes?.[option.name])
            return optionRenderModes[option.name];
        if (isColorOption(option.name))
            return "swatch";
        if (option.values.length > dropdownThreshold)
            return "dropdown";
        return "button";
    };
    return (React.createElement("div", { className: clsx("seekora-variant-selector", className), style: style }, options.map((option) => {
        const mode = getRenderMode(option);
        const selected = selections[option.name];
        return (React.createElement("div", { key: option.name, className: "seekora-variant-option-group" },
            React.createElement("label", { className: "seekora-variant-option-label" },
                option.name,
                selected && (React.createElement("span", { className: "seekora-variant-option-label__selected" }, selected))),
            mode === "dropdown" ? (React.createElement("div", { onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() },
                React.createElement(CustomSelect, { className: "seekora-variant-dropdown", value: selected ?? "", onChange: (val) => onSelectionChange(option.name, val), placeholder: `Select ${option.name}`, "aria-label": `Select ${option.name}`, options: option.values.map((val) => {
                        const available = showAvailability
                            ? getAvailability(option.name, val, options, variants, selections)
                            : true;
                        return {
                            value: val,
                            label: available ? val : `${val} (Unavailable)`,
                            disabled: !available,
                        };
                    }) }))) : (React.createElement("div", { className: "seekora-variant-buttons" }, option.values.map((value) => {
                const isActive = selected === value;
                const available = showAvailability
                    ? getAvailability(option.name, value, options, variants, selections)
                    : true;
                const color = mode === "swatch" ? resolveColor(value, colorMap) : null;
                if (mode === "swatch" && color) {
                    const swatchStyle = {
                        "--seekora-swatch-bg": color,
                    };
                    return (React.createElement("button", { key: value, type: "button", className: clsx("seekora-variant-color-swatch", isActive && "seekora-variant-button--active", !available && "seekora-variant-button--unavailable"), title: value, onMouseDown: (e) => {
                            e.stopPropagation();
                            e.preventDefault();
                        }, onClick: (e) => {
                            e.stopPropagation();
                            onSelectionChange(option.name, value);
                        }, disabled: !available, style: swatchStyle, "aria-label": `${option.name}: ${value}`, "aria-pressed": isActive }));
                }
                return (React.createElement("button", { key: value, type: "button", className: clsx("seekora-variant-button", isActive && "seekora-variant-button--active", !available && "seekora-variant-button--unavailable"), onMouseDown: (e) => {
                        e.stopPropagation();
                        e.preventDefault();
                    }, onClick: (e) => {
                        e.stopPropagation();
                        onSelectionChange(option.name, value);
                    }, disabled: !available, "aria-label": `${option.name}: ${value}`, "aria-pressed": isActive }, value));
            })))));
    })));
}
