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

/**
 * DatePicker component theme following Select pattern exactly
 * Uses common forms theme for consistency
 *
 * Note: Simple, one-time-use styles are inlined directly in components
 * Only complex or reused styles are defined here
 */
const datePickerTheme = {
    containerStyle: formsBaseTheme.wrapperStyle,
    baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
    // Trigger button style - bg-white for light mode; dark mode uses neutral-900
    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
    // Placeholder text style - matches Input placeholder styling
    placeholderTextStyle: "text-[var(--color-text-placeholder)]",
    // Selected value text style
    valueTextStyle: "text-[var(--color-text-primary)]",
    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}`,
    },
    triggerStates: formsBaseTheme.states,
    triggerHoverStates: formsBaseTheme.hoverStates,
    triggerFocusStates: formsBaseTheme.focusStates,
    iconEndStyle: formsBaseTheme.iconStyles.right,
    iconEndPadding: formsBaseTheme.iconStyles.padding.right,
    // Dropdown body - with dark mode support
    bodyStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed " +
        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
    bodyWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
    // Presets sidebar - with dark mode support
    presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
    // Preset button - with dark mode support
    presetButtonStyle: "w-full text-left px-3 py-2 text-base rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
        "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
        "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +
        // Dark mode
        "dark:text-[var(--color-neutral-400)] dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] " +
        "dark:data-[active=true]:bg-[var(--color-neutral-700)] dark:data-[active=true]:text-[var(--color-neutral-100)] " +
        "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
    helperTextStyle: formsBaseTheme.helperText,
    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)]",
    },
};

export { datePickerTheme };
