import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId, useState } from "react";
import { ChevronDown, RotateCcw } from "lucide-react";
import { Button } from "../../cmp/button";
import { Label } from "../../cmp/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../cmp/select";
import { Slider } from "../../cmp/slider";
import { ThemeSelector } from "../BaseThemeSelector";
import { useTheme } from "../Provider";
import { MAX_BORDER_RADIUS, MIN_BORDER_RADIUS } from "../utils";
import { Base16Picker } from "./Base16Picker";
import { CustomCssPicker } from "./CustomCssPicker";
import { PolarityPicker } from "./PolarityPicker";
import { PrimaryPicker } from "./PrimaryPicker";
import { TintPicker } from "./TintPicker";
const FONT_OPTIONS = [
    { value: "public-sans", label: "Public Sans" },
    { value: "inter", label: "Inter" },
    { value: "source-serif-4", label: "Source Serif 4" },
    { value: "jetbrains-mono", label: "JetBrains Mono" },
    { value: "system", label: "System" },
];
function Section({ title, children }) {
    return (_jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h2", { className: "font-heading font-semibold", children: title }), children] }));
}
function ThemeSlider({ label, value, min, max, step, onValueChange, format = (value) => String(value), }) {
    const id = useId();
    return (_jsxs("div", { className: "grid gap-2 text-sm", children: [_jsxs("div", { className: "flex justify-between gap-4", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx("output", { htmlFor: id, className: "font-mono text-xs text-muted-foreground", children: format(value) })] }), _jsx(Slider, { id: id, min: min, max: max, step: step, value: [value], onValueChange: (next) => onValueChange(Array.isArray(next) ? (next[0] ?? value) : next) })] }));
}
function DesignSlider({ field, ...props }) {
    const { themeDesign, setThemeDesign } = useTheme();
    return (_jsx(ThemeSlider, { ...props, value: themeDesign[field], onValueChange: (value) => setThemeDesign((current) => ({ ...current, [field]: value })) }));
}
export function ThemeCustomizer({ value, onValueChange, }) {
    const [advancedOpen, setAdvancedOpen] = useState(false);
    const fontId = useId();
    const { themeDesign, setThemeDesign, themeBorderRadius, setThemeBorderRadius, parentTheme, isThemeCustomized, resetThemePreset, } = useTheme();
    return (_jsxs("div", { className: "w-full min-w-0 space-y-7", children: [_jsxs("div", { className: "flex flex-col gap-5", children: [_jsx(ThemeSelector, { value: value, onValueChange: onValueChange }), _jsxs("div", { className: "grid gap-7 lg:grid-cols-2", children: [_jsxs(Section, { title: "Color scheme", children: [_jsx(PolarityPicker, {}), _jsx(TintPicker, {}), _jsx(PrimaryPicker, {})] }), _jsxs("div", { className: "space-y-7", children: [_jsx(Section, { title: "Shape and spacing", children: _jsxs("div", { className: "grid gap-6 xl:grid-cols-2", children: [_jsx(DesignSlider, { label: "Density", field: "density", min: 0.8, max: 1.3, step: 0.025, format: (v) => `${Math.round(v * 100)}%` }), _jsx(DesignSlider, { label: "Border width", field: "borderWidth", min: 0, max: 3, step: 0.25, format: (v) => `${v}px` }), _jsx(ThemeSlider, { label: "Border radius", value: themeBorderRadius, min: MIN_BORDER_RADIUS, max: MAX_BORDER_RADIUS, step: 0.025, format: (value) => `${value.toFixed(3)}rem`, onValueChange: setThemeBorderRadius })] }) }), _jsx(Section, { title: "Depth and motion", children: _jsxs("div", { className: "grid gap-6 xl:grid-cols-2", children: [_jsx(DesignSlider, { label: "Shadow strength", field: "shadowStrength", min: 0, max: 1.5, step: 0.05, format: (v) => `${Math.round(v * 100)}%` }), _jsx(DesignSlider, { label: "Motion", field: "motion", min: 0, max: 1.75, step: 0.05, format: (v) => v === 0 ? "Reduced" : `${Math.round(v * 100)}%` })] }) })] })] }), _jsx(Section, { title: "Typography", children: _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs("div", { className: "grid gap-2 text-sm", children: [_jsx(Label, { htmlFor: fontId, children: "Font" }), _jsxs(Select, { value: themeDesign.fontFamily, onValueChange: (value) => setThemeDesign((current) => ({
                                                ...current,
                                                fontFamily: value,
                                            })), children: [_jsx(SelectTrigger, { id: fontId, className: "w-full", children: _jsx(SelectValue, { children: (value) => FONT_OPTIONS.find((font) => font.value === value)?.label }) }), _jsx(SelectContent, { children: FONT_OPTIONS.map((font) => (_jsx(SelectItem, { value: font.value, children: font.label }, font.value))) })] })] }), _jsx(DesignSlider, { label: "Font scale", field: "fontScale", min: 0.875, max: 1.2, step: 0.025, format: (v) => `${Math.round(v * 100)}%` }), _jsx(DesignSlider, { label: "Heading boldness", field: "headingWeight", min: 400, max: 800, step: 50, format: (v) => `${Math.round((v - 400) / 4)}%` })] }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex gap-2 w-full", children: [_jsxs(Button, { className: "flex-1/2 md:flex-none", variant: "outline", "aria-expanded": advancedOpen, onClick: () => setAdvancedOpen((open) => !open), children: ["Advanced Options", _jsx(ChevronDown, { "data-icon": "inline-end", className: advancedOpen ? "rotate-180" : undefined })] }), _jsxs(Button, { className: "flex-1/2 md:flex-none", variant: "outline", disabled: !parentTheme || !isThemeCustomized, onClick: resetThemePreset, children: [_jsx(RotateCcw, { "data-icon": "inline-start" }), "Reset to ", parentTheme?.title ?? "parent"] })] }), advancedOpen && (_jsxs("div", { className: "mt-6 space-y-7", children: [_jsx(Section, { title: "Base16 colors", children: _jsx(Base16Picker, {}) }), _jsx(Section, { title: "Custom CSS", children: _jsx(CustomCssPicker, {}) })] }))] })] }));
}
export const StylePicker = ThemeCustomizer;
