"use client"

import { cn } from "@/lib/utils"
import {
  LABEL_MENU_COLOR_SWATCHES,
} from "@/components/gmail/sidebar/sidebar-nav-constants"
import {
  MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS,
} from "@/lib/mail-chrome-classes"
import { normalizeNavColorClass } from "@/lib/nav-color"

export type NavColorPickerVariant = "menu" | "sheet" | "field"

const SWATCH_SIZE: Record<NavColorPickerVariant, string> = {
  menu: "size-6",
  sheet: "size-8",
  field: "size-8",
}

export function NavColorPicker({
  value,
  onChange,
  variant = "field",
  swatches = LABEL_MENU_COLOR_SWATCHES,
  className,
  "aria-label": ariaLabel = "Couleur",
}: {
  value: string
  onChange: (swatch: string) => void
  variant?: NavColorPickerVariant
  swatches?: readonly string[]
  className?: string
  "aria-label"?: string
}) {
  const active = normalizeNavColorClass(value)
  const swatchClass = SWATCH_SIZE[variant]

  return (
    <div
      role="group"
      aria-label={ariaLabel}
      className={cn("grid grid-cols-6 gap-1.5", className)}
    >
      {swatches.map((sw) => (
        <button
          key={sw}
          type="button"
          title={sw}
          aria-label={sw}
          aria-pressed={active === sw}
          onClick={() => onChange(sw)}
          className={cn(
            swatchClass,
            "rounded-full border border-black/10 outline-none ring-offset-1",
            variant === "menu"
              ? cn(
                  "hover:ring-2",
                  MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS
                )
              : "hover:ring-2 hover:ring-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
            sw,
            active === sw && "ring-2 ring-primary ring-offset-1"
          )}
        />
      ))}
    </div>
  )
}