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

/**
 * Default theme configuration for TimePicker component
 *
 * Follows the same pattern as Select and DatePicker, extending formsBaseTheme
 * for consistent trigger styling across all form dropdowns.
 */
const timePickerTheme = {
    // Container wrapper
    containerStyle: formsBaseTheme.wrapperStyle,
    // Trigger base styles - extends common form input group style (same as Input/Select/DatePicker)
    baseStyle: formsBaseTheme.inputGroupBaseStyle,
    // Trigger size variants - composed from atomic tokens
    triggerSizes: {
        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}`,
    },
    // Trigger state variants - inherited from common form theme
    triggerStates: formsBaseTheme.states,
    // Trigger focus state variants - inherited from common form theme
    triggerFocusStates: formsBaseTheme.focusStates,
    // Trigger hover state variants - inherited from common form theme
    triggerHoverStates: formsBaseTheme.hoverStates,
    // Start icon style - inherited from common form theme
    iconStartStyle: formsBaseTheme.iconStyles.left,
    // End icon style - inherited from common form theme
    iconEndStyle: formsBaseTheme.iconStyles.right,
    // Icon padding styles - inherited from common form theme
    iconStartPadding: formsBaseTheme.iconStyles.padding.left,
    iconEndPadding: formsBaseTheme.iconStyles.padding.right,
    // Placeholder text style - matches Select/Combobox placeholder styling
    placeholderTextStyle: formsBaseTheme.placeholderStyle,
    // Selected value text style
    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
    // Clear button styles (positioned between left content and right icon)
    clearButtonStyle: "absolute right-8 top-1/2 -translate-y-1/2 p-1 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors z-10",
    // Dropdown container styles (TimePicker-specific)
    // Width is controlled by trigger size via estimatedWidth parameter
    dropdownStyle: "fixed z-[1000] bg-white border border-[var(--color-border)] rounded-[var(--form-radius)] shadow-lg overflow-hidden " +
        "dark:bg-[var(--color-background-secondary)] ",
    // Dropdown size variants - primarily for internal spacing/padding
    dropdownSizes: {
        sm: "",
        md: "",
        lg: "",
    },
    // Helper text style - inherited from common form theme
    helperTextStyle: formsBaseTheme.helperText,
    // Helper text state variants
    helperTextStates: {
        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
        invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
    },
    // ============================================
    // Wheel Picker Styles (iOS-style scroll wheel)
    // ============================================
    // Wheel columns container - horizontal flex with dividers
    wheelContainerStyle: "flex overflow-hidden",
    // Individual wheel column - relative positioning for highlight overlay
    wheelColumnStyle: "flex-1 flex flex-col relative",
    // Wheel column header label
    wheelHeaderStyle: "text-center py-2 text-sm font-semibold text-[var(--color-text-muted)] uppercase",
    // Center highlight row - positioned behind selected item
    wheelHighlightStyle: "absolute -mt-4 inset-x-0 bg-[var(--color-border)] pointer-events-none z-0",
    // Wheel item - centered with transition for smooth opacity/color changes
    wheelItemStyle: "flex items-center justify-center text-[var(--color-text-muted)] transition-colors select-none cursor-pointer relative z-10",
    // Wheel item active (selected) style - stronger text color and weight
    wheelItemActiveStyle: "text-[var(--color-text-primary)] font-semibold",
    // Footer container - flexbox for action buttons
    footerStyle: "flex justify-between items-center gap-2 px-2 py-2 border-t border-[var(--color-border)] " +
        "dark:border-[var(--color-neutral-700)]",
    // Inner input element style - transparent bg, no outline, tabular-nums for aligned digits
    inputStyle: "bg-transparent outline-none flex-1 tabular-nums min-w-0 " +
        "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
        "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
    // AM/PM period toggle button
    periodToggleStyle: "px-1.5 py-0.5 text-sm font-semibold rounded " +
        "bg-[var(--color-background-tertiary)] text-[var(--color-text-primary)] " +
        "hover:bg-[var(--color-background-quaternary)] transition-colors cursor-pointer select-none " +
        "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
        "dark:hover:bg-[var(--color-neutral-600)]",
};

export { timePickerTheme };
