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

/**
 * DateRangePicker theme — mirrors DatePicker theme with added checkmark style
 */
const dateRangePickerTheme = {
    containerStyle: formsBaseTheme.wrapperStyle,
    baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
    placeholderTextStyle: "text-[var(--color-text-placeholder)]",
    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,
    bodyStyle: "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)]",
    presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
        "dark:bg-[var(--color-neutral-800)] ",
    presetButtonStyle: "w-full text-left px-3 py-2 text-base font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
        "flex items-center justify-between gap-2 " +
        "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:hover:bg-[var(--color-neutral-700)] " +
        "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)]",
    presetCheckmarkStyle: "size-4 text-[var(--color-primary)] shrink-0",
    mobilePresetsContainerStyle: "sm:hidden px-3 pt-3 pb-1",
    mobilePresetButtonStyle: "whitespace-nowrap px-3 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
        "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
        "hover:bg-[var(--color-background-tertiary)] hover:text-[var(--color-text-primary)] " +
        "data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary)] " +
        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-300)] " +
        "dark:hover:bg-[var(--color-neutral-700)] " +
        "dark:data-[active=true]:bg-[var(--color-primary-950)] dark:data-[active=true]:text-[var(--color-primary-300)]",
    mobileRangeDisplayStyle: "sm:hidden text-sm text-center py-2 text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
    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 { dateRangePickerTheme };
