import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../cmp/select";
import { Label } from "../../cmp/label";
import { useTheme } from "../Provider";
import { THEME_TINT_OPTIONS } from "../utils";
import { ColorPicker } from "./ColorPicker";
export function TintPicker() {
    const { themeTint, setThemeTint, themeColor, setThemeColor, setThemePalette, } = useTheme();
    const setSingleColor = (color) => {
        setThemePalette(null);
        setThemeColor(color);
    };
    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Tint" }), _jsx(ColorPicker, { label: "Theme color", value: themeColor, onChange: (color) => {
                    if (color === "") {
                        setThemePalette(null);
                        setThemeColor("");
                        return;
                    }
                    setSingleColor(color);
                }, allowEmpty: true }), _jsxs(Select, { value: themeTint, onValueChange: (value) => setThemeTint(value), children: [_jsx(SelectTrigger, { className: "w-65", children: _jsx(SelectValue, { children: THEME_TINT_OPTIONS.find((option) => option.value === themeTint)
                                ?.label ?? "Soft" }) }), _jsx(SelectContent, { children: THEME_TINT_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }));
}
