import { formsBaseTheme } from '../forms.theme.js';

/**
 * Color options for text color picker
 */
const colorOptions = [
    { label: "Black", value: "#000000", className: "text-black" },
    { label: "Gray", value: "#6B7280", className: "text-gray-500" },
    { label: "Red", value: "#EF4444", className: "text-red-500" },
    { label: "Orange", value: "#F97316", className: "text-orange-500" },
    { label: "Yellow", value: "#EAB308", className: "text-yellow-500" },
    { label: "Green", value: "#22C55E", className: "text-green-500" },
    { label: "Blue", value: "#3B82F6", className: "text-blue-500" },
    { label: "Indigo", value: "#6366F1", className: "text-indigo-500" },
    { label: "Purple", value: "#A855F7", className: "text-purple-500" },
    { label: "Pink", value: "#EC4899", className: "text-pink-500" },
];
/**
 * Rich Text Editor theme - extends common forms base theme for consistency
 */
const richTextEditorTheme = {
    // Base container styles - inherited from common form theme
    wrapperStyle: formsBaseTheme.wrapperStyle,
    // Container with common input group style + RTE-specific overrides
    containerStyle: `${formsBaseTheme.inputGroupBaseStyle} flex-col min-h-[120px] overflow-hidden`,
    // Editor content area - extends common control base style
    editorStyle: `${formsBaseTheme.controlBaseStyle} min-h-[100px] px-3 py-2 resize-none overflow-y-auto [&_p]:my-1 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:font-semibold [&_em]:italic [&_u]:underline data-[state=disabled]:cursor-not-allowed empty:before:content-[attr(data-placeholder)] empty:before:text-[var(--color-text-placeholder)] empty:before:pointer-events-none`,
    // Toolbar styling (RTE-specific)
    toolbarStyle: "flex items-center gap-1 p-2 border-b border-[var(--color-border)] bg-white dark:bg-[var(--color-background-secondary)]",
    // Toolbar button styling
    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-white active:bg-[var(--color-background-tertiary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-tertiary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:hover:bg-[var(--color-primary-50)] border border-transparent data-[pressed=true]:bg-[var(--color-primary-50)] data-[pressed=true]:text-[var(--color-primary-900)] data-[pressed=true]:shadow-inner data-[pressed=true]:border-[var(--color-primary-200)]",
    // Dropdown styling (font size, color picker)
    dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
    // Dropdown item styling
    dropdownItemStyle: "block w-full px-3 py-2 text-left text-base text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
    // Separator between toolbar sections
    separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
    // Color picker grid layout
    colorPickerStyle: "flex flex-wrap gap-1 w-[152px]",
    // Color swatch button
    colorSwatchStyle: "size-6 rounded-[calc(var(--radius-base)*0.75)] cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-1",
    // Size variants - use common form sizes for consistency
    sizes: {
        sm: `${formsBaseTheme.sizes.sm.text} min-h-[80px]`,
        md: `${formsBaseTheme.sizes.md.text} min-h-[120px]`,
        lg: `${formsBaseTheme.sizes.lg.text} min-h-[160px]`,
    },
    // State variants - inherited from common form theme
    states: formsBaseTheme.states,
    // Helper text styles - inherited from common form theme
    helperText: formsBaseTheme.helperText,
};

export { colorOptions, richTextEditorTheme };
