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

/**
 * Default theme for the Select component
 * Extends the common forms base theme
 */
const selectTheme = {
    // Container style for the entire select component
    containerStyle: formsBaseTheme.wrapperStyle,
    // Base styles for the button element - extends the common input group style
    baseStyle: formsBaseTheme.inputGroupBaseStyle + " items-center justify-between",
    // Button wrapper style
    buttonWrapperStyle: "relative w-full",
    // Button style - bg-white for light mode only; dark mode bg comes from baseStyle (inputGroupBaseStyle)
    buttonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
    // Placeholder text style - matches Input placeholder styling
    placeholderTextStyle: formsBaseTheme.placeholderStyle,
    // Selected value text style
    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
    // 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,
    // Hover state variants - inherited from common form theme
    hoverStates: formsBaseTheme.hoverStates,
    // Options container style - Uses position: fixed for proper scroll behavior with standardized z-index
    // Width is controlled by trigger size via estimatedWidth parameter
    optionsContainerStyle: formsBaseTheme.dropdownStyles.container +
        " py-0 p-1 border border-[var(--color-border)] min-w-[8rem]",
    // Search input style
    searchInputStyle: "group",
    // Individual option style
    optionStyle: formsBaseTheme.dropdownStyles.option + " rounded-[var(--radius-base)]",
    // Selected option style
    selectedOptionStyle: formsBaseTheme.dropdownStyles.optionSelected,
    // Highlighted option style (keyboard navigation)
    highlightedOptionStyle: formsBaseTheme.dropdownStyles.optionHighlighted,
    // Disabled option style
    disabledOptionStyle: formsBaseTheme.dropdownStyles.optionDisabled,
    // 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,
    // Left icon style - inherited from common form theme
    iconStartStyle: formsBaseTheme.iconStyles.left,
    // Right icon style - inherited from common form theme
    iconEndStyle: formsBaseTheme.iconStyles.right,
    // Check icon style for selected options
    checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary)] " +
        "dark:text-[var(--color-primary-400)]",
    // Icon padding styles - inherited from common form theme
    iconPadding: formsBaseTheme.iconStyles.padding,
    // Multi-select chip styles
    chipContainerStyle: "flex flex-nowrap gap-1 items-center min-w-0 overflow-hidden -ml-2",
    chipOverflowStyle: "inline-flex items-center shrink-0 whitespace-nowrap px-1.5 py-0.5 text-sm font-medium " +
        "text-[var(--color-text-muted)]",
};

export { selectTheme };
