import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
import {
  createContext,
  useContext,
  type ComponentProps,
  type CSSProperties,
} from "react"
import { cn } from "./utils.ts"

export function Label({ className, ...props }: ComponentProps<"label">) {
  return (
    <label
      data-slot="label"
      className={cn("pmx-ui-label", className)}
      {...props}
    />
  )
}

export function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn("pmx-ui-switch", className)}
      {...props}
    >
      <SwitchPrimitive.Thumb data-slot="switch-thumb" />
    </SwitchPrimitive.Root>
  )
}

const ToggleGroupContext = createContext({ spacing: 2 })

export function ToggleGroup({
  className,
  spacing = 2,
  children,
  ...props
}: ToggleGroupPrimitive.Props & { spacing?: number }) {
  return (
    <ToggleGroupPrimitive
      data-slot="toggle-group"
      data-spacing={spacing}
      style={{ "--pmx-ui-group-gap": spacing } as CSSProperties}
      className={cn("pmx-ui-toggle-group", className)}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ spacing }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive>
  )
}

export function ToggleGroupItem({
  className,
  ...props
}: TogglePrimitive.Props) {
  const { spacing } = useContext(ToggleGroupContext)
  return (
    <TogglePrimitive
      data-slot="toggle-group-item"
      data-spacing={spacing}
      className={cn("pmx-ui-toggle-group-item", className)}
      {...props}
    />
  )
}

export function Separator({
  className,
  orientation = "horizontal",
  ...props
}: SeparatorPrimitive.Props) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn("pmx-ui-separator", className)}
      {...props}
    />
  )
}