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

/**
 * Default theme for the Mention component.
 * Uses the shared forms base theme for consistency with Input/Textarea.
 */
const mentionTheme = {
    // Outermost wrapper
    wrapperStyle: formsBaseTheme.wrapperStyle,
    // Input group container with outline and focus ring
    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
    // JS-driven focus ring (applied when editable div is focused)
    inputGroupFocusStyle: "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",
    // Base editable div styles
    editableStyle: `${formsBaseTheme.controlBaseStyle} whitespace-pre-wrap break-words overflow-y-auto cursor-text`,
    // Size variants
    sizes: {
        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.textareaHeight}`,
        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.textareaHeight}`,
        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.textareaHeight}`,
    },
    // Inline mention Tag chip styles
    mentionTagStyle: "mx-0.5 align-baseline cursor-default select-none",
    // Dropdown container - reuses the shared dropdown styles
    dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",
    // Individual suggestion item
    suggestionStyle: "relative flex items-center gap-2.5 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",
    // Highlighted suggestion (keyboard navigation)
    suggestionHighlightedStyle: "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50 " +
        "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-400)]/10",
    // Avatar image
    suggestionAvatarStyle: "size-7 rounded-full object-cover shrink-0 " +
        "bg-[var(--color-background-tertiary)] dark:bg-[var(--color-neutral-700)]",
    // Avatar fallback (initials circle)
    suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-sm font-medium " +
        "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
        "dark:bg-[var(--color-primary-900)] dark:text-[var(--color-primary-300)]",
    // Suggestion label text
    suggestionLabelStyle: "text-base font-medium truncate",
    // Suggestion description text
    suggestionDescriptionStyle: "text-sm text-[var(--color-text-muted)] truncate " +
        "dark:text-[var(--color-neutral-500)]",
    // Empty state
    emptyMessageStyle: formsBaseTheme.dropdownStyles.emptyMessage,
    // Loading state
    loadingStyle: "py-3 px-3 text-center text-[var(--color-text-muted)] " +
        "dark:text-[var(--color-neutral-500)]",
};

export { mentionTheme };
