import { cn } from '../utils/cn'

export type InputControlSize = 'default' | 'sm' | 'xs'

export const getInputControlTextClassName = (size: InputControlSize) =>
  cn(
    'font-sans font-normal',
    size === 'default' ? '!text-sm !leading-5' : '!text-xs !leading-4',
  )

export const getInputControlContentTextClassName = (size: InputControlSize) =>
  size === 'default'
    ? '[&_label]:!leading-inherit [&_span]:!leading-inherit [&_label]:!text-inherit [&_span]:!text-inherit'
    : '[&_label]:!text-xs [&_label]:!leading-4 [&_span]:!text-xs [&_span]:!leading-4'

export const getInputControlValueSlotClassName = (
  slot: string,
  size: InputControlSize,
) =>
  size === 'default'
    ? `[&_[data-slot=${slot}]]:!text-sm [&_[data-slot=${slot}]]:!leading-5`
    : `[&_[data-slot=${slot}]]:!text-xs [&_[data-slot=${slot}]]:!leading-4`

export const getDropdownItemPaddingClassName = (size: InputControlSize) =>
  size === 'default'
    ? 'px-4 py-3'
    : size === 'sm'
      ? 'px-3 py-2.5'
      : 'px-3 py-1.5'

export const getDropdownItemIndicatorOffsetClassName = (
  size: InputControlSize,
) => (size === 'default' ? 'right-4' : 'right-3')

export const getDropdownItemBaseClassName = (size: InputControlSize) =>
  cn(
    getInputControlTextClassName(size),
    size === 'default'
      ? '[&_span]:!leading-inherit [&_span]:!text-inherit'
      : '[&_span]:!text-xs [&_span]:!leading-4',
    'relative flex w-full cursor-default select-none items-center gap-2 outline-none',
    getDropdownItemPaddingClassName(size),
    size === 'default' || size === 'sm'
      ? '[&_img]:size-6 [&_svg:not([class*=size-])]:size-6'
      : '[&_img]:size-4 [&_svg:not([class*=size-])]:size-4',
  )