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

/**
 * Default theme for the Combobox component
 * Extends the common forms base theme
 */
const comboboxTheme = {
    // Container style for the entire combobox component
    containerStyle: formsBaseTheme.wrapperStyle,
    // Wrapper style
    wrapperStyle: "relative w-full",
    // Input group styles - extends the common input group style
    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
    // Base input styles
    inputStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3 pr-8 ` +
        "cursor-text",
    // Placeholder text style
    inputPlaceholderStyle: formsBaseTheme.placeholderStyle,
    // Size variants - composed from atomic tokens
    sizes: {
        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
    },
    // State variants - inherited from common form theme
    states: formsBaseTheme.states,
    // Focus state variants - inherited from common form theme
    focusStates: formsBaseTheme.focusStates,
    // Icon positioning styles
    iconStartStyle: formsBaseTheme.iconStyles.left,
    iconEndStyle: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-[var(--color-text-muted)] " +
        "dark:text-[var(--color-neutral-500)]",
    // Icon padding configuration
    iconPadding: formsBaseTheme.iconStyles.padding,
    // Clear button styles
    clearButtonStyle: "absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer " +
        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
    clearIconStyle: "size-4",
    // Dropdown styles - matches Select component for consistency
    dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",
    // Individual option style
    optionStyle: formsBaseTheme.dropdownStyles.option,
    // Selected option style
    selectedOptionStyle: formsBaseTheme.dropdownStyles.optionSelected,
    // Highlighted option style (keyboard navigation)
    highlightedOptionStyle: formsBaseTheme.dropdownStyles.optionHighlighted,
    // Disabled option style
    disabledOptionStyle: formsBaseTheme.dropdownStyles.optionDisabled,
    // Empty message style
    emptyMessageStyle: formsBaseTheme.dropdownStyles.emptyMessage,
    // Create option style
    createOptionStyle: formsBaseTheme.dropdownStyles.optionCreate,
    // Helper text style - inherited from common form theme
    helperTextStyle: formsBaseTheme.helperText,
    // Helper text state variants
    helperTextStates: formsBaseTheme.helperTextStates,
};

export { comboboxTheme };
