/**
 * Common theme configuration for form components
 * This file defines shared styling patterns used across all form components
 * Individual component themes should extend these base styles
 */
// Common form theme configuration
const formsBaseTheme = {
    // Common wrapper style
    wrapperStyle: "relative w-full",
    // Common input group style with focus, hover, and state variations
    inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
        "focus-within:outline-2 focus-within:outline-[var(--color-primary-600)] focus-within:-outline-offset-1 " +
        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all " +
        // Dark mode
        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] " +
        "dark:focus-within:outline-[var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
    // Common base input/control style
    controlBaseStyle: "w-full bg-transparent text-base text-[var(--color-text-primary)] " +
        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
        // Dark mode
        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
    // Size variants - atomic design tokens for composability
    // These tokens can be composed together or used individually for maximum flexibility
    sizes: {
        sm: {
            text: "text-base",
            padding: "py-[var(--form-py-sm)] px-[var(--form-px-sm)]",
            height: "h-[var(--form-min-h-sm)]",
            textareaHeight: "min-h-[calc(var(--form-min-h-sm)*2)]",
        },
        md: {
            text: "text-base",
            padding: "py-[var(--form-py-md)] px-[var(--form-px-md)]",
            height: "h-[var(--form-min-h-md)]",
            textareaHeight: "min-h-[calc(var(--form-min-h-md)*2)]",
        },
        lg: {
            text: "text-lg",
            padding: "py-[var(--form-py-lg)] px-[var(--form-px-lg)]",
            height: "h-[var(--form-min-h-lg)]",
            textareaHeight: "min-h-[calc(var(--form-min-h-lg)*2)]",
        },
    },
    // Common state variants
    states: {
        default: "",
        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] outline-[var(--color-border)] " +
            "[&_input]:text-[var(--color-text-disabled)] [&_textarea]:text-[var(--color-text-disabled)] " +
            "[&_select]:text-[var(--color-text-disabled)] [&_input]:cursor-not-allowed " +
            "[&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed " +
            "[&_input]:placeholder:text-[var(--color-text-placeholder)] " +
            "[&_textarea]:placeholder:text-[var(--color-text-placeholder)] " +
            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed " +
            // Dark mode
            "dark:bg-[var(--color-neutral-800)] dark:outline-[var(--color-neutral-700)]",
        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] focus-within:outline-[var(--color-danger)] " +
            // Dark mode
            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
    },
    // Common focus state variants
    focusStates: {
        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 " +
            "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
        disabled: "outline-none",
        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10 " +
            "dark:ring-[var(--color-danger-500)]/20",
    },
    // Common hover state variants
    hoverStates: {
        default: "",
        disabled: "",
        invalid: "",
    },
    // Common helper text style with state variations
    helperText: "text-sm text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.state-invalid_&]:text-[var(--color-danger-500)] " +
        "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
    // Common icon styles
    iconStyles: {
        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)] " +
            "dark:text-[var(--color-neutral-500)]",
        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] " +
            "dark:text-[var(--color-neutral-500)]",
        padding: {
            left: "pl-10",
            right: "pr-10",
        },
    },
    // Dropdown/listbox styles for Select, Combobox, and similar components
    dropdownStyles: {
        // Container for dropdown panel
        container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-base border border-[var(--color-border)] " +
            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none " +
            "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
        // Base option style
        option: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
            "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +
            "dark:hover:text-[var(--color-primary-400)] " +
            "dark:hover:bg-[var(--color-primary-400)]/10",
        // Selected option modifier
        optionSelected: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
        // Highlighted option (keyboard navigation)
        optionHighlighted: "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50 " +
            "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-400)]/10",
        // Disabled option modifier
        optionDisabled: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--color-text-primary)]",
        // Create new option style
        optionCreate: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
        // Empty state message
        emptyMessage: "py-3 px-3 text-center text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
    },
    // Placeholder text style (shared across input-like components)
    placeholderStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
    // Helper text state variants (beyond base 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)]",
    },
};

export { formsBaseTheme };
