Toolbar

"use client"

import type { CSSProperties } from "react"
import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"

import { buttonStyles, type ButtonSize, type ButtonVariant } from "@/components/ui/button"
import { inputStyles } from "@/components/ui/input"
import { Toggle, ToggleGroupContext, type ToggleProps } from "@/components/ui/toggle"
import { separatorStyles } from "@/components/ui/separator"
import { stateStyles } from "@/lib/state-styles"
import { states } from "@/theme/states"
import { color, radius, space } from "@/theme/tokens.stylex"

const styles = stylex.create({
  root: {
    display: "flex",
    alignItems: "center",
    gap: space.s1,
    width: "fit-content",
    padding: space.s1,
    borderRadius: radius.xl,
  },
  vertical: { flexDirection: "column", alignItems: "stretch" },
  group: { display: "flex", alignItems: "center", gap: space.s1 },
  separator: { marginInline: space.s1, marginBlock: space.s1 },
  ghostOnWell: {
    backgroundColor: { default: null, ":hover": color.itemHighlightBg },
    "--carbon-menu-open-bg": color.itemHighlightBg,
  },
})
const toolbarStyles = {
  ...styles,
  root: [states.well, styles.root],
  button: buttonStyles.base,
  variants: buttonStyles.variants,
  sizes: buttonStyles.sizes,
  input: inputStyles.base,
}
type Overrides = { xstyle?: StyleXStyles; className?: string; style?: CSSProperties }
type ButtonOptions = { variant?: ButtonVariant; size?: ButtonSize }

function Toolbar({
  xstyle,
  className,
  style,
  children,
  ...props
}: Omit<ToolbarPrimitive.Root.Props, "className" | "style"> & Overrides) {
  return (
    <ToolbarPrimitive.Root
      data-slot="toolbar"
      {...props}
      {...stateStyles(
        (state) => [
          states.well,
          styles.root,
          state.orientation === "vertical" && styles.vertical,
          xstyle,
        ],
        { className, style },
      )}
    >
      <ToggleGroupContext value={{ onWell: true }}>{children}</ToggleGroupContext>
    </ToolbarPrimitive.Root>
  )
}
function ToolbarGroup({
  xstyle,
  className,
  style,
  ...props
}: Omit<ToolbarPrimitive.Group.Props, "className" | "style"> & Overrides) {
  return (
    <ToolbarPrimitive.Group
      data-slot="toolbar-group"
      {...props}
      {...stateStyles(
        (state) => [styles.group, state.orientation === "vertical" && styles.vertical, xstyle],
        { className, style },
      )}
    />
  )
}
function ToolbarButton({
  variant = "ghost",
  size = "default",
  xstyle,
  className,
  style,
  ...props
}: Omit<ToolbarPrimitive.Button.Props, "className" | "style"> & Overrides & ButtonOptions) {
  return (
    <ToolbarPrimitive.Button
      data-slot="toolbar-button"
      data-variant={variant}
      data-size={size}
      {...props}
      {...stateStyles(
        (state) => [
          buttonStyles.base,
          buttonStyles.variants[variant],
          variant === "ghost" && styles.ghostOnWell,
          buttonStyles.sizes[size],
          state.disabled && states.disabled,
          xstyle,
        ],
        { className, style, hook: "carbon-icons" },
      )}
    />
  )
}
function ToolbarToggle<Value extends string = string>({
  focusableWhenDisabled = true,
  ...props
}: ToggleProps<Value> & { focusableWhenDisabled?: boolean }) {
  return (
    <ToolbarPrimitive.Button
      disabled={props.disabled}
      nativeButton={props.nativeButton}
      focusableWhenDisabled={focusableWhenDisabled}
      render={<Toggle data-slot="toolbar-toggle" {...props} />}
    />
  )
}

function ToolbarLink({
  variant = "link",
  size = "default",
  xstyle,
  className,
  style,
  ...props
}: Omit<ToolbarPrimitive.Link.Props, "className" | "style"> & Overrides & ButtonOptions) {
  return (
    <ToolbarPrimitive.Link
      data-slot="toolbar-link"
      data-variant={variant}
      data-size={size}
      {...props}
      {...stateStyles(
        () => [buttonStyles.base, buttonStyles.variants[variant], buttonStyles.sizes[size], xstyle],
        { className, style, hook: "carbon-icons" },
      )}
    />
  )
}
function ToolbarInput({
  xstyle,
  className,
  style,
  ...props
}: Omit<ToolbarPrimitive.Input.Props, "className" | "style"> & Overrides) {
  return (
    <ToolbarPrimitive.Input
      data-slot="toolbar-input"
      {...props}
      {...stateStyles((state) => [inputStyles.base, state.disabled && states.disabled, xstyle], {
        className,
        style,
      })}
    />
  )
}
function ToolbarSeparator({
  xstyle,
  className,
  style,
  ...props
}: Omit<ToolbarPrimitive.Separator.Props, "className" | "style"> & Overrides) {
  return (
    <ToolbarPrimitive.Separator
      data-slot="toolbar-separator"
      {...props}
      {...stateStyles(
        (state) => [
          separatorStyles.base,
          separatorStyles.orientations[state.orientation],
          styles.separator,
          xstyle,
        ],
        { className, style },
      )}
    />
  )
}
export {
  Toolbar,
  ToolbarGroup,
  ToolbarButton,
  ToolbarToggle,
  ToolbarLink,
  ToolbarInput,
  ToolbarSeparator,
  toolbarStyles,
}