import * as React from "react"
import { cva } from "class-variance-authority"

import { cn } from "@/lib/utils"
import {
  getInputDefaultValue,
  getInputHelperText,
  getInputPlaceholder,
  getInputTags,
  inputCopy,
  type InputKind,
  type InputTag,
  type InputVisualState,
} from "./input-content"

type InputSize = "md" | "lg"
type InputVariant = "default" | "soft"

type InputNativeProps = Omit<
  React.ComponentProps<"input">,
  "className" | "dir" | "size"
>

type InputModeRenderProps = {
  buttonLabel?: React.ReactNode
  inlineLeadingAddon?: React.ReactNode
  inlineTagsClassName?: string
  inlineTrailingAddon?: React.ReactNode
  leadingAddon?: React.ReactNode
  quantityLabel?: React.ReactNode
  shortcut?: React.ReactNode
  tags?: InputTag[]
  trailingAddon?: React.ReactNode
}

type InputKindSpecificProps = InputModeRenderProps &
  (
    | { kind?: "default" }
    | { kind: "shortcut" }
    | { kind: "add-on" }
    | { kind: "inline-add-on" }
    | { kind: "tags" | "inline-tags" }
    | {
        kind:
          | "leading-dropdown"
          | "trailing-dropdown"
          | "leading-button"
          | "trailing-button"
      }
    | { kind: "quantity" | "quantity-2" }
  )

type InputDynamicKindProps = { kind?: InputKind } & InputModeRenderProps

type InputCommonProps = InputNativeProps & {
  className?: string
  controlClassName?: string
  helperClassName?: string
  labelClassName?: string
  surfaceClassName?: string
  errorMessage?: React.ReactNode
  hasHelperText?: boolean
  hasInformationIcon?: boolean
  hasLabel?: boolean
  isOptional?: boolean
  isRequired?: boolean
  label?: React.ReactNode
  leadingIcon?: React.ReactNode
  message?: React.ReactNode
  optionalText?: React.ReactNode
  size?: InputSize
  state?: InputVisualState
  trailingIcon?: React.ReactNode
  valueText?: string
  variant?: InputVariant
  dir?: "ltr" | "rtl" | "auto"
}

type InputProps = InputCommonProps & (InputKindSpecificProps | InputDynamicKindProps)

const inputRoot = cva("grid w-[var(--bh-input-width)] max-w-full")

const inputSurface = cva(
  [
    "group/input-surface relative flex w-full overflow-hidden rounded-[var(--bh-input-radius)]",
    "transition-[background-color,box-shadow]",
    "[--bh-input-border:var(--bh-border-input)] [--shadow-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--shadow-component-default)]",
    "focus-within:shadow-[var(--shadow-input-focus-ring)]",
  ],
  {
    variants: {
      size: {
        md: "h-[var(--bh-input-md-height)]",
        lg: "h-[var(--bh-input-lg-height)]",
      },
      variant: {
        default: "bg-[var(--bh-interactive-input-default)]",
        soft: "bg-[var(--bh-interactive-input-soft)]",
      },
      state: {
        default:
          "shadow-[var(--shadow-input)]",
        filled:
          "shadow-[var(--shadow-input)]",
        error:
          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--shadow-input)] focus-within:shadow-[var(--shadow-input)]",
        disabled:
          "bg-[var(--bh-interactive-input-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
      },
    },
    compoundVariants: [
      {
        variant: "soft",
        state: "disabled",
        class: "bg-[var(--bh-interactive-input-soft-disabled)]",
      },
    ],
    defaultVariants: {
      size: "lg",
      state: "default",
      variant: "default",
    },
  }
)

const inputContent = cva(
  "flex min-w-0 flex-1 items-center gap-[var(--bh-input-content-gap)]",
  {
    variants: {
      size: {
        md: "px-[var(--bh-input-md-padding-x)]",
        lg: "px-[var(--bh-input-lg-padding-x)]",
      },
    },
    defaultVariants: {
      size: "lg",
    },
  }
)

const inputControl = cva(
  [
    "min-w-0 flex-1 border-0 bg-transparent p-0 text-start",
    "text-[length:var(--bh-text-body-md-regular-font-size)]",
    "font-[var(--bh-text-body-md-regular-font-weight)]",
    "leading-[var(--bh-text-body-md-regular-line-height)]",
    "tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
    "text-[var(--bh-content-default)] outline-none",
    "placeholder:text-[var(--bh-content-muted)]",
    "disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)] disabled:placeholder:text-[var(--bh-content-disabled)]",
  ]
)

const inputTag = cva(
  [
    "inline-flex h-[var(--bh-input-tag-height)] shrink-0 items-center rounded-[var(--bh-control-md)] border border-solid",
    "border-[var(--bh-border-default)] bg-[var(--bh-interactive-secondary-default)] px-[var(--bh-input-tag-padding-x)]",
    "text-[length:var(--bh-text-body-xs-medium-font-size)]",
    "font-[var(--bh-text-body-xs-medium-font-weight)]",
    "leading-[var(--bh-text-body-xs-medium-line-height)]",
    "tracking-[var(--bh-text-body-xs-medium-letter-spacing)]",
    "text-[var(--bh-content-default)]",
  ],
  {
    variants: {
      disabled: {
        true:
          "border-[var(--bh-border-disabled)] bg-[var(--bh-interactive-secondary-disabled)] text-[var(--bh-content-disabled)]",
        false: "",
      },
    },
    defaultVariants: {
      disabled: false,
    },
  }
)

const inputSegment = cva(
  [
    "inline-flex h-full shrink-0 items-center justify-center gap-[var(--bh-input-segment-gap)]",
    "bg-[var(--bh-interactive-secondary-default)] px-[var(--bh-input-segment-padding-x)]",
    "text-[length:var(--bh-text-body-md-regular-font-size)]",
    "font-[var(--bh-text-body-md-regular-font-weight)]",
    "leading-[var(--bh-text-body-md-regular-line-height)]",
    "tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
    "text-[var(--bh-content-subtle)]",
    "disabled:text-[var(--bh-content-disabled)]",
  ],
  {
    variants: {
      side: {
        leading: "border-e border-[var(--bh-border-input)]",
        trailing: "border-s border-[var(--bh-border-input)]",
      },
      interactive: {
        true:
          "outline-none transition-[background-color,color] hover:bg-[var(--bh-interactive-secondary-hover)] focus-visible:bg-[var(--bh-interactive-secondary-hover)]",
        false: "",
      },
      disabled: {
        true:
          "border-[var(--bh-border-disabled)] bg-[var(--bh-interactive-secondary-disabled)] text-[var(--bh-content-disabled)]",
        false: "",
      },
    },
    defaultVariants: {
      interactive: false,
      side: "leading",
      disabled: false,
    },
  }
)

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      controlClassName,
      helperClassName,
      inlineTagsClassName,
      labelClassName,
      surfaceClassName,
      buttonLabel,
      defaultValue,
      dir,
      disabled,
      errorMessage,
      hasHelperText,
      hasInformationIcon = true,
      hasLabel,
      id,
      inlineLeadingAddon,
      inlineTrailingAddon,
      isOptional = false,
      isRequired = false,
      kind = "default",
      label,
      leadingAddon,
      leadingIcon,
      message,
      optionalText,
      placeholder,
      quantityLabel,
      readOnly,
      required,
      shortcut = inputCopy.shortcut,
      size = "lg",
      state = "default",
      tags,
      trailingAddon,
      trailingIcon,
      value,
      valueText,
      variant = "default",
      ...props
    },
    ref
  ) => {
    const generatedId = React.useId()
    const inputId = id || generatedId
    const helperId = `${inputId}-helper`
    const inputRef = React.useRef<HTMLInputElement | null>(null)
    const resolvedDir = dir
    const visualState = disabled ? "disabled" : state
    const isDisabled = visualState === "disabled"
    const isInvalid = visualState === "error" && !isDisabled
    const isTagInput = kind === "tags" || kind === "inline-tags"
    const selectedLabel = label
    const selectedOptionalText = optionalText
    const inferredPlaceholder = getInputPlaceholder({
      placeholder,
    })
    const inferredDefaultValue = getInputDefaultValue({
      defaultValue,
      isTagInput,
      state: visualState,
      value,
      valueText,
    })
    const helperText = getInputHelperText({
      errorMessage,
      isInvalid,
      message,
    })
    const shouldRenderLabel = hasLabel ?? hasRenderableContent(selectedLabel)
    const shouldRenderHelperText =
      hasHelperText ?? hasRenderableContent(helperText)
    const selectedTags = getInputTags({ kind, tags })

    function focusInput() {
      if (!isDisabled) inputRef.current?.focus()
    }

    function setInputRef(node: HTMLInputElement | null) {
      inputRef.current = node

      if (typeof ref === "function") {
        ref(node)
      } else if (ref) {
        ref.current = node
      }
    }

    return (
      <div
        data-kind={kind}
        data-size={size}
        data-slot="input-root"
        data-state={visualState}
        data-variant={variant}
        dir={resolvedDir}
        className={cn(inputRoot(), className)}
      >
        {shouldRenderLabel ? (
          <InputLabel
            className={labelClassName}
            htmlFor={inputId}
            isOptional={isOptional}
            isRequired={isRequired || Boolean(required)}
            label={selectedLabel}
            optionalText={selectedOptionalText}
          />
        ) : null}

        <div
          data-slot="input-body"
          className={cn(
            "grid",
            shouldRenderLabel && "mt-[var(--bh-input-label-gap)]",
            selectedTags.inline.length > 0
              ? "gap-[var(--bh-input-inline-tags-gap)]"
              : "gap-[var(--bh-input-helper-gap)]"
          )}
        >
          <div
            aria-disabled={isDisabled || undefined}
            data-slot="input-surface"
            data-state={visualState}
            className={cn(
              inputSurface({
                size,
                state: visualState,
                variant,
              }),
              surfaceClassName
            )}
            onClick={focusInput}
          >
            {renderLeadingSegment({
              buttonLabel,
              disabled: isDisabled,
              kind,
              leadingAddon,
              quantityLabel,
              trailingAddon,
            })}

            <span data-slot="input-content" className={cn(inputContent({ size }))}>
              {shouldRenderLeadingIcon(kind) ? (
                <InputLeadingIcon disabled={isDisabled} icon={leadingIcon} />
              ) : null}

              {kind === "inline-add-on" &&
              hasRenderableContent(inlineLeadingAddon) ? (
                <InputInlineAddon disabled={isDisabled}>
                  {inlineLeadingAddon}
                </InputInlineAddon>
              ) : null}

              {selectedTags.inside.length > 0 ? (
                <InputTagList disabled={isDisabled} tags={selectedTags.inside} />
              ) : null}

              <input
                aria-describedby={shouldRenderHelperText ? helperId : undefined}
                aria-invalid={isInvalid || undefined}
                data-slot="input-control"
                data-state={visualState}
                defaultValue={inferredDefaultValue}
                disabled={isDisabled}
                id={inputId}
                placeholder={inferredPlaceholder}
                readOnly={readOnly}
                ref={setInputRef}
                required={required}
                value={value}
                className={cn(inputControl(), controlClassName)}
                {...props}
              />

              {kind === "inline-add-on" &&
              hasRenderableContent(inlineTrailingAddon) ? (
                <InputInlineAddon disabled={isDisabled}>
                  {inlineTrailingAddon}
                </InputInlineAddon>
              ) : null}

              {shouldRenderInfoIcon(kind, hasInformationIcon) ? (
                <InputInfoIcon
                  disabled={isDisabled}
                  invalid={isInvalid}
                  icon={trailingIcon}
                />
              ) : null}

              {kind === "shortcut" ? (
                <InputShortcut disabled={isDisabled}>{shortcut}</InputShortcut>
              ) : null}
            </span>

            {renderTrailingSegment({
              buttonLabel,
              disabled: isDisabled,
              kind,
              leadingAddon,
              quantityLabel,
              trailingAddon,
            })}
          </div>

          {selectedTags.inline.length > 0 ? (
            <InputTagList
              className={inlineTagsClassName}
              disabled={isDisabled}
              inline
              tags={selectedTags.inline}
            />
          ) : null}

          {shouldRenderHelperText ? (
            <InputHelperText
              className={helperClassName}
              id={helperId}
              invalid={isInvalid}
            >
              {helperText}
            </InputHelperText>
          ) : null}
        </div>
      </div>
    )
  }
)
Input.displayName = "Input"

function InputLabel({
  className,
  htmlFor,
  isOptional,
  isRequired,
  label,
  optionalText,
}: {
  className?: string
  htmlFor: string
  isOptional: boolean
  isRequired: boolean
  label: React.ReactNode
  optionalText: React.ReactNode
}) {
  return (
    <label
      data-slot="input-label"
      htmlFor={htmlFor}
      className={cn(
        "flex w-full items-center gap-[var(--bh-input-inline-gap)] text-start",
        className
      )}
    >
      <span
        data-slot="input-label-text"
        dir="auto"
        className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)]"
      >
        {label}
      </span>
      {isRequired ? (
        <span
          aria-hidden="true"
          data-slot="input-label-required"
          className="shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-danger-default)]"
        >
          *
        </span>
      ) : null}
      {isOptional && hasRenderableContent(optionalText) ? (
        <span
          data-slot="input-label-optional"
          dir="auto"
          className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
        >
          {optionalText}
        </span>
      ) : null}
    </label>
  )
}

function hasRenderableContent(content: React.ReactNode) {
  return (
    content !== undefined &&
    content !== null &&
    content !== false &&
    content !== ""
  )
}

function InputHelperText({
  children,
  className,
  id,
  invalid,
}: {
  children: React.ReactNode
  className?: string
  id: string
  invalid: boolean
}) {
  return (
    <p
      data-slot="input-helper-text"
      id={id}
      className={cn(
        "m-0 w-full text-start text-[length:var(--bh-text-body-xs-regular-font-size)]",
        "font-[var(--bh-text-body-xs-regular-font-weight)]",
        "leading-[var(--bh-text-body-xs-regular-line-height)]",
        "tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
        invalid ? "text-[var(--bh-content-danger-default)]" : "text-[var(--bh-content-subtle)]",
        className
      )}
    >
      <span data-slot="input-helper-label" dir="auto" className="min-w-0">
        {children}
      </span>
    </p>
  )
}

function InputLeadingIcon({
  disabled,
  icon,
}: {
  disabled: boolean
  icon?: React.ReactNode
}) {
  return (
    <span
      aria-hidden="true"
      data-slot="input-leading-icon"
      className={cn(
        "flex size-[var(--bh-input-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
        disabled && "text-[var(--bh-content-disabled)]"
      )}
    >
      {icon || <span className="text-[length:var(--bh-input-leading-symbol-font-size)] leading-none">@</span>}
    </span>
  )
}

function InputInfoIcon({
  disabled,
  icon,
  invalid,
}: {
  disabled: boolean
  icon?: React.ReactNode
  invalid: boolean
}) {
  return (
    <span
      aria-hidden="true"
      data-slot="input-info-icon"
      className={cn(
        "flex size-[var(--bh-input-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
        invalid && "text-[var(--bh-content-danger-default)]",
        disabled && "text-[var(--bh-content-disabled)]"
      )}
    >
      {icon || (
        <svg
          className="size-[var(--bh-input-info-icon-size)]"
          fill="none"
          focusable="false"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667ZM8 6.33333C8.55227 6.33333 9 5.88562 9 5.33333C9 4.78105 8.55227 4.33333 8 4.33333C7.44773 4.33333 7 4.78105 7 5.33333C7 5.88562 7.44773 6.33333 8 6.33333ZM9.33333 10H8.66667V7H6.66667V8.33333H7.33333V10H6.66667V11.3333H9.33333V10Z"
            fill="currentColor"
          />
        </svg>
      )}
    </span>
  )
}

function InputInlineAddon({
  children,
  disabled,
}: {
  children: React.ReactNode
  disabled: boolean
}) {
  return (
    <span
      data-slot="input-inline-addon"
      dir="auto"
      className={cn(
        "shrink-0 whitespace-nowrap text-[var(--bh-content-subtle)]",
        disabled && "text-[var(--bh-content-disabled)]"
      )}
    >
      {children}
    </span>
  )
}

function InputShortcut({
  children,
  disabled,
}: {
  children: React.ReactNode
  disabled: boolean
}) {
  return (
    <span
      data-slot="input-shortcut"
      className={cn(
        "inline-flex h-[var(--bh-input-shortcut-height)] shrink-0 items-center rounded-[var(--bh-radius-md-6)] border border-[var(--bh-border-default)] bg-[var(--bh-interactive-secondary-default)] px-[var(--bh-input-shortcut-padding-x)] text-[length:var(--bh-text-body-2xs-medium-font-size)] font-[var(--bh-text-body-2xs-medium-font-weight)] leading-[var(--bh-text-body-2xs-medium-line-height)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)] text-[var(--bh-content-subtle)]",
        disabled &&
          "border-[var(--bh-border-disabled)] bg-[var(--bh-interactive-secondary-disabled)] text-[var(--bh-content-disabled)]"
      )}
    >
      {children}
    </span>
  )
}

function InputTagList({
  className,
  disabled,
  inline = false,
  tags,
}: {
  className?: string
  disabled: boolean
  inline?: boolean
  tags: InputTag[]
}) {
  return (
    <span
      data-inline={inline ? "true" : undefined}
      data-slot={inline ? "input-inline-tags" : "input-tags"}
      className={cn(
        "flex min-w-0 items-center gap-[var(--bh-input-inline-gap)]",
        inline && "flex-wrap",
        className
      )}
    >
      {tags.map((tag, index) => (
        <span
          key={tag.id || index}
          data-slot="input-tag"
          className={cn(inputTag({ disabled }))}
        >
          <span data-slot="input-tag-label" dir="auto" className="min-w-0 truncate">
            {tag.label}
          </span>
        </span>
      ))}
    </span>
  )
}

function InputSegment({
  children,
  disabled,
  interactive = false,
  side,
}: {
  children: React.ReactNode
  disabled: boolean
  interactive?: boolean
  side: "leading" | "trailing"
}) {
  const Comp = interactive ? "button" : "span"

  return (
    <Comp
      data-slot="input-segment"
      disabled={interactive ? disabled : undefined}
      type={interactive ? "button" : undefined}
      className={cn(inputSegment({ disabled, interactive, side }))}
      onClick={(event) => {
        if (interactive) event.stopPropagation()
      }}
    >
      {children}
    </Comp>
  )
}

type InputSegmentRenderContext = {
  buttonLabel?: React.ReactNode
  disabled: boolean
  kind: InputKind
  leadingAddon?: React.ReactNode
  quantityLabel?: React.ReactNode
  trailingAddon?: React.ReactNode
}

type InputSegmentRenderer = (
  context: InputSegmentRenderContext
) => React.ReactNode

const leadingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>> = {
  "add-on": ({ disabled, leadingAddon }) =>
    hasRenderableContent(leadingAddon) ? (
      <InputSegment disabled={disabled} side="leading">
        {leadingAddon}
      </InputSegment>
    ) : null,
  "leading-button": ({ buttonLabel, disabled }) =>
    hasRenderableContent(buttonLabel) ? (
      <InputSegment disabled={disabled} interactive side="leading">
        {buttonLabel}
      </InputSegment>
    ) : null,
  "leading-dropdown": ({ buttonLabel, disabled }) => (
    <InputSegment disabled={disabled} interactive side="leading">
      {buttonLabel}
      <ChevronIcon />
    </InputSegment>
  ),
  "quantity-2": ({ disabled, quantityLabel }) => (
    <InputSegment disabled={disabled} interactive side="leading">
      <MinusIcon />
      {hasRenderableContent(quantityLabel) ? (
        <span className="sr-only">{quantityLabel}</span>
      ) : null}
    </InputSegment>
  ),
}

const trailingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>> = {
  "add-on": ({ disabled, trailingAddon }) =>
    hasRenderableContent(trailingAddon) ? (
      <InputSegment disabled={disabled} side="trailing">
        {trailingAddon}
      </InputSegment>
    ) : null,
  "trailing-button": ({ buttonLabel, disabled }) =>
    hasRenderableContent(buttonLabel) ? (
      <InputSegment disabled={disabled} interactive side="trailing">
        {buttonLabel}
      </InputSegment>
    ) : null,
  "trailing-dropdown": ({ buttonLabel, disabled }) => (
    <InputSegment disabled={disabled} interactive side="trailing">
      {buttonLabel}
      <ChevronIcon />
    </InputSegment>
  ),
  quantity: ({ disabled }) => (
    <InputSegment disabled={disabled} interactive side="trailing">
      <MinusIcon />
      <PlusIcon />
    </InputSegment>
  ),
  "quantity-2": ({ disabled }) => (
    <InputSegment disabled={disabled} interactive side="trailing">
      <MinusIcon />
      <PlusIcon />
    </InputSegment>
  ),
}

function renderLeadingSegment(context: InputSegmentRenderContext) {
  return leadingSegmentRenderers[context.kind]?.(context) ?? null
}

function renderTrailingSegment(context: InputSegmentRenderContext) {
  return trailingSegmentRenderers[context.kind]?.(context) ?? null
}

function ChevronIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-[var(--bh-input-chevron-size)]"
      fill="none"
      focusable="false"
      viewBox="0 0 16 16"
    >
      <path
        d="M8 10.6667L4 6.66667L4.93333 5.73333L8 8.8L11.0667 5.73333L12 6.66667L8 10.6667Z"
        fill="currentColor"
      />
    </svg>
  )
}

function MinusIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-[var(--bh-input-stepper-icon-size)]"
      fill="none"
      focusable="false"
      viewBox="0 0 16 16"
    >
      <path d="M3.33333 7.33333H12.6667V8.66667H3.33333V7.33333Z" fill="currentColor" />
    </svg>
  )
}

function PlusIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-[var(--bh-input-stepper-icon-size)]"
      fill="none"
      focusable="false"
      viewBox="0 0 16 16"
    >
      <path
        d="M7.33333 7.33333V3.33333H8.66667V7.33333H12.6667V8.66667H8.66667V12.6667H7.33333V8.66667H3.33333V7.33333H7.33333Z"
        fill="currentColor"
      />
    </svg>
  )
}

function shouldRenderLeadingIcon(kind: InputKind) {
  return [
    "default",
    "shortcut",
    "tags",
    "inline-tags",
    "trailing-dropdown",
    "leading-dropdown",
    "trailing-button",
    "leading-button",
  ].includes(kind)
}

function shouldRenderInfoIcon(kind: InputKind, hasInformationIcon: boolean) {
  if (!hasInformationIcon) return false

  return ![
    "shortcut",
    "trailing-dropdown",
    "trailing-button",
    "quantity",
    "quantity-2",
  ].includes(kind)
}

export { Input, inputContent, inputControl, inputRoot, inputSurface }
export type {
  InputKind,
  InputProps,
  InputSize,
  InputTag,
  InputVariant,
  InputVisualState,
}
