Combobox

"use client"

import type { CSSProperties } from "react"
import { createContext, use, useRef } from "react"
import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"
import { clsx } from "clsx"
import { Check, ChevronDown, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { InputGroup, InputGroupAddon, InputGroupButton } from "@/components/ui/input-group"
import { stateStyles } from "@/lib/state-styles"
import { states } from "@/theme/states"
import {
  color,
  duration,
  ease,
  layer,
  leading,
  radius,
  shadow,
  space,
  text,
} from "@/theme/tokens.stylex"

const ComboboxContentContext = createContext(false)

const styles = stylex.create({
  hidden: { opacity: 0 },
  content: {
    zIndex: layer.popup,
    width: "var(--anchor-width)",
    minWidth: "9rem",
    maxWidth: "var(--available-width)",
    maxHeight: "var(--available-height)",
    overflow: "hidden",
    "--carbon-popup-radius": radius.lg,
    borderRadius: "var(--carbon-popup-radius)",
    transformOrigin: "var(--transform-origin)",
    transitionProperty: "opacity, transform",
    transitionDuration: { default: duration.fade, "@media (prefers-reduced-motion: reduce)": "0s" },
    transitionTimingFunction: ease.standard,
  },
  list: {
    maxHeight: "min(calc(18rem - 2.25rem), calc(var(--available-height) - 2.25rem))",
    overflowY: "auto",
    overscrollBehavior: "contain",
    scrollPaddingTop: space.s1,
    scrollPaddingBottom: space.s1,
    padding: space.s1,
  },
  listEmpty: { padding: 0 },
  item: {
    position: "relative",
    display: "flex",
    width: "100%",
    alignItems: "center",
    gap: space.s1_5,
    cursor: "default",
    userSelect: "none",
    paddingBlock: space.s1,
    paddingInlineStart: space.s1_5,
    paddingInlineEnd: space.s8,
    fontSize: text.sm,
    lineHeight: leading.sm,
    outlineStyle: "none",
    "--carbon-icon-size": space.s4,
  },
  indicator: {
    pointerEvents: "none",
    position: "absolute",
    insetInlineEnd: space.s2,
    display: "flex",
    width: space.s4,
    height: space.s4,
    alignItems: "center",
    justifyContent: "center",
  },
  label: {
    paddingInline: space.s1_5,
    paddingBlock: space.s1,
    fontSize: text.xs,
    lineHeight: leading.xs,
    fontWeight: 500,
    color: color.mutedForeground,
  },
  empty: {
    display: "flex",
    width: "100%",
    justifyContent: "center",
    paddingBlock: { default: space.s2, ":empty": 0 },
    textAlign: "center",
    fontSize: text.sm,
    lineHeight: leading.sm,
    color: color.mutedForeground,
  },
  separator: {
    marginInline: `calc(-1 * ${space.s1})`,
    marginBlock: space.s1,
    height: 1,
    backgroundColor: color.border,
  },
  chevron: { color: color.mutedForeground },
  frame: { width: "auto" },
  frameInPopup: {
    margin: space.s1,
    marginBlockEnd: 0,
    borderRadius: `max(0px, calc(var(--carbon-popup-radius, ${radius.lg}) - ${space.s1}))`,
    backgroundColor: `color-mix(in oklab, ${color.input} 30%, transparent)`,
  },
  inputTrigger: {
    color: color.mutedForeground,
    "--carbon-menu-open-bg": color.transparent,
    "--carbon-menu-open-fg": color.current,
  },
  chips: {
    display: "flex",
    minHeight: space.s8,
    flexWrap: "wrap",
    alignItems: "center",
    gap: space.s1,
    borderRadius: radius.lg,
    borderWidth: 1,
    borderStyle: "solid",
    paddingInline: space.s1,
    paddingBlock: space.s1,
    fontSize: text.sm,
    lineHeight: leading.sm,
    transitionProperty: "color, background-color, border-color, box-shadow",
    transitionDuration: duration.color,
    transitionTimingFunction: ease.standard,
  },
  chipsDrop: {
    borderColor: {
      default: "var(--carbon-border-color)",
      ":hover": color.fieldHoverEdge,
      ":focus-within": color.fieldFocusEdge,
    },
    boxShadow: { default: shadow.field, ":focus-within": `${shadow.field}, ${shadow.fieldFocus}` },
  },
  chip: {
    display: "flex",
    width: "fit-content",
    height: space.s5,
    alignItems: "center",
    justifyContent: "center",
    gap: space.s1,
    whiteSpace: "nowrap",
    borderRadius: radius.sm,
    paddingInline: space.s1_5,
    backgroundColor: color.muted,
    color: color.foreground,
    fontSize: text.xs,
    lineHeight: leading.xs,
    fontWeight: 500,
  },
  chipWithRemove: { paddingInlineEnd: 0 },
  chipRemove: {
    width: space.s5,
    height: space.s5,
    marginInlineStart: `calc(-1 * ${space.s1})`,
    opacity: { default: 0.5, ":hover": 1 },
  },
  chipsInput: {
    flexGrow: 1,
    minWidth: space.s16,
    height: space.s5,
    paddingInline: space.s1_5,
    borderWidth: 0,
    backgroundColor: color.transparent,
    color: color.foreground,
    fontSize: text.sm,
    lineHeight: leading.sm,
    outlineStyle: "none",
    "::placeholder": { color: color.mutedForeground },
  },
})

const comboboxStyles = {
  content: styles.content,
  list: styles.list,
  item: [styles.item, states.popupItem],
  itemHighlighted: states.itemHighlight,
  itemDisabled: states.disabled,
  label: styles.label,
  empty: styles.empty,
  separator: styles.separator,
  chips: [styles.chips, states.focusWithinRing, states.fieldSurface, styles.chipsDrop],
  chip: styles.chip,
  chipsInput: styles.chipsInput,
}

const slide = stylex.create({
  top: { transform: `scale(0.95) translateY(${space.s2})` },
  bottom: { transform: `scale(0.95) translateY(calc(-1 * ${space.s2}))` },
  left: { transform: `scale(0.95) translateX(${space.s2})` },
  right: { transform: `scale(0.95) translateX(calc(-1 * ${space.s2}))` },
  "inline-start": { transform: `scale(0.95) translateX(${space.s2})` },
  "inline-end": { transform: `scale(0.95) translateX(calc(-1 * ${space.s2}))` },
})

type Overrides = { xstyle?: StyleXStyles; className?: string }

type StateOverrides = Overrides & { style?: CSSProperties }

function Combobox<Value, Multiple extends boolean | undefined = false>(
  props: ComboboxPrimitive.Root.Props<Value, Multiple>,
) {
  return <ComboboxPrimitive.Root {...props} />
}

function ComboboxValue(props: ComboboxPrimitive.Value.Props) {
  return <ComboboxPrimitive.Value {...props} />
}

type ComboboxTriggerProps = Omit<ComboboxPrimitive.Trigger.Props, "className"> & Overrides

function ComboboxTrigger({ xstyle, className, children, ...props }: ComboboxTriggerProps) {
  const sx = stylex.props(xstyle)
  return (
    <ComboboxPrimitive.Trigger
      data-slot="combobox-trigger"
      {...sx}
      {...props}
      className={clsx("carbon-icons", sx.className, className)}
    >
      {children}
      <ChevronDown {...stylex.props(styles.chevron)} />
    </ComboboxPrimitive.Trigger>
  )
}

type ComboboxClearProps = Omit<ComboboxPrimitive.Clear.Props, "className"> & Overrides

function ComboboxClear({ xstyle, className, ...props }: ComboboxClearProps) {
  return (
    <ComboboxPrimitive.Clear
      data-slot="combobox-clear"
      render={
        <InputGroupButton
          data-slot="combobox-clear"
          size="icon-xs"
          xstyle={xstyle}
          className={className}
        />
      }
      aria-label="Clear"
      {...props}
    >
      <X />
    </ComboboxPrimitive.Clear>
  )
}

type ComboboxInputProps = Omit<ComboboxPrimitive.Input.Props, "className"> &
  Overrides & {
    showTrigger?: boolean
    showClear?: boolean
  }

function ComboboxInput({
  xstyle,
  className,
  children,
  disabled = false,
  "aria-invalid": ariaInvalid,
  showTrigger = true,
  showClear = false,
  ...props
}: ComboboxInputProps) {
  const inPopup = use(ComboboxContentContext)
  const invalid = ariaInvalid != null && ariaInvalid !== false

  return (
    <ComboboxPrimitive.InputGroup
      render={
        <InputGroup
          disabled={disabled}
          invalid={invalid}
          xstyle={[styles.frame, inPopup && styles.frameInPopup, xstyle]}
          className={className}
        />
      }
    >
      <ComboboxPrimitive.Input render={<Input />} aria-invalid={invalid || undefined} {...props} />
      {(showTrigger || showClear) && (
        <InputGroupAddon align="inline-end">
          {showClear && <ComboboxClear disabled={disabled} />}
          {showTrigger && (
            <ComboboxTrigger
              render={
                <InputGroupButton
                  data-slot="combobox-trigger"
                  size="icon-xs"
                  xstyle={styles.inputTrigger}
                />
              }
              aria-label="Open"
              disabled={disabled}
            />
          )}
        </InputGroupAddon>
      )}
      {children}
    </ComboboxPrimitive.InputGroup>
  )
}

type ComboboxContentProps = Omit<ComboboxPrimitive.Popup.Props, "className" | "style"> &
  Pick<
    ComboboxPrimitive.Positioner.Props,
    "align" | "alignOffset" | "side" | "sideOffset" | "anchor"
  > &
  StateOverrides

function ComboboxContent({
  xstyle,
  style,
  className,
  side = "bottom",
  sideOffset = 6,
  align = "start",
  alignOffset = 0,
  anchor,
  ...props
}: ComboboxContentProps) {
  return (
    <ComboboxPrimitive.Portal>
      <ComboboxPrimitive.Positioner
        align={align}
        alignOffset={alignOffset}
        side={side}
        sideOffset={sideOffset}
        anchor={anchor}
        {...stylex.props(states.positioner)}
      >
        <ComboboxContentContext value>
          <ComboboxPrimitive.Popup
            data-slot="combobox-content"
            {...props}
            {...stateStyles(
              (state) => [
                states.popupSurface,
                styles.content,
                (state.transitionStatus === "starting" || state.transitionStatus === "ending") &&
                  styles.hidden,
                (state.transitionStatus === "starting" || state.transitionStatus === "ending") &&
                  slide[state.side],
                xstyle,
              ],
              { className, style },
            )}
          />
        </ComboboxContentContext>
      </ComboboxPrimitive.Positioner>
    </ComboboxPrimitive.Portal>
  )
}

type ComboboxListProps = Omit<ComboboxPrimitive.List.Props, "className" | "style"> & StateOverrides

function ComboboxList({ xstyle, style, className, ...props }: ComboboxListProps) {
  return (
    <ComboboxPrimitive.List
      data-slot="combobox-list"
      {...props}
      {...stateStyles((state) => [styles.list, state.empty && styles.listEmpty, xstyle], {
        className,
        style,
        hook: "no-scrollbar",
      })}
    />
  )
}

type ComboboxItemProps = Omit<ComboboxPrimitive.Item.Props, "className" | "style"> & StateOverrides

function ComboboxItem({ xstyle, style, className, children, ...props }: ComboboxItemProps) {
  return (
    <ComboboxPrimitive.Item
      data-slot="combobox-item"
      {...props}
      {...stateStyles(
        (state) => [
          styles.item,
          states.popupItem,
          state.highlighted && states.itemHighlight,
          state.disabled && states.disabled,
          xstyle,
        ],
        { className, style, hook: "carbon-icons" },
      )}
    >
      {children}
      <ComboboxPrimitive.ItemIndicator
        render={<span data-slot="combobox-item-indicator" {...stylex.props(styles.indicator)} />}
      >
        <Check />
      </ComboboxPrimitive.ItemIndicator>
    </ComboboxPrimitive.Item>
  )
}

function ComboboxGroup(props: ComboboxPrimitive.Group.Props) {
  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />
}

type ComboboxLabelProps = Omit<ComboboxPrimitive.GroupLabel.Props, "className"> & Overrides

function ComboboxLabel({ xstyle, className, ...props }: ComboboxLabelProps) {
  const sx = stylex.props(styles.label, xstyle)
  return (
    <ComboboxPrimitive.GroupLabel
      data-slot="combobox-label"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    />
  )
}

function ComboboxCollection(props: ComboboxPrimitive.Collection.Props) {
  return <ComboboxPrimitive.Collection {...props} />
}

type ComboboxEmptyProps = Omit<ComboboxPrimitive.Empty.Props, "className"> & Overrides

function ComboboxEmpty({ xstyle, className, ...props }: ComboboxEmptyProps) {
  const sx = stylex.props(styles.empty, xstyle)
  return (
    <ComboboxPrimitive.Empty
      data-slot="combobox-empty"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    />
  )
}

type ComboboxSeparatorProps = Omit<ComboboxPrimitive.Separator.Props, "className"> & Overrides

function ComboboxSeparator({ xstyle, className, ...props }: ComboboxSeparatorProps) {
  const sx = stylex.props(styles.separator, xstyle)
  return (
    <ComboboxPrimitive.Separator
      data-slot="combobox-separator"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    />
  )
}

type ComboboxChipsProps = Omit<ComboboxPrimitive.Chips.Props, "className"> & Overrides

function ComboboxChips({ xstyle, className, ...props }: ComboboxChipsProps) {
  const sx = stylex.props(
    styles.chips,
    states.focusWithinRing,
    states.fieldSurface,
    styles.chipsDrop,
    xstyle,
  )
  return (
    <ComboboxPrimitive.Chips
      data-slot="combobox-chips"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    />
  )
}

type ComboboxChipProps = Omit<ComboboxPrimitive.Chip.Props, "className" | "style"> &
  StateOverrides & { showRemove?: boolean }

function ComboboxChip({
  xstyle,
  style,
  className,
  children,
  showRemove = true,
  ...props
}: ComboboxChipProps) {
  return (
    <ComboboxPrimitive.Chip
      data-slot="combobox-chip"
      {...props}
      {...stateStyles(
        (state) => [
          styles.chip,
          showRemove && styles.chipWithRemove,
          state.disabled && states.disabled,
          xstyle,
        ],
        { className, style },
      )}
    >
      {children}
      {showRemove && (
        <ComboboxPrimitive.ChipRemove
          data-slot="combobox-chip-remove"
          render={<Button variant="ghost" size="icon-xs" xstyle={styles.chipRemove} />}
          aria-label="Remove"
        >
          <X />
        </ComboboxPrimitive.ChipRemove>
      )}
    </ComboboxPrimitive.Chip>
  )
}

type ComboboxChipsInputProps = Omit<ComboboxPrimitive.Input.Props, "className"> & Overrides

function ComboboxChipsInput({ xstyle, className, ...props }: ComboboxChipsInputProps) {
  const sx = stylex.props(styles.chipsInput, xstyle)
  return (
    <ComboboxPrimitive.Input
      data-slot="combobox-chip-input"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    />
  )
}

function useComboboxAnchor() {
  return useRef<HTMLDivElement | null>(null)
}

export {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxClear,
  ComboboxCollection,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxList,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxValue,
  comboboxStyles,
  useComboboxAnchor,
}