import { useMessage } from "@workspace/i18n"
import { SunIcon } from "@workspace/ui/components/icon"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@workspace/ui/components/select"
import { cn } from "@workspace/ui/lib/utils"

import type { Brightness } from "../../display"
import { appearanceMessages } from "../../messages"

export interface BrightnessFieldProps {
  className?: string
  onValueChange: (value: Brightness) => void
  value: Brightness
}

export function BrightnessField({
  className,
  onValueChange,
  value,
}: BrightnessFieldProps) {
  const title = useMessage(appearanceMessages.brightness)
  const dim = useMessage(appearanceMessages.brightnessDim)
  const normal = useMessage(appearanceMessages.brightnessNormal)
  const bright = useMessage(appearanceMessages.brightnessBright)
  const description = useMessage(appearanceMessages.brightnessDescription)
  const items: ReadonlyArray<{ label: string; value: Brightness }> = [
    { label: dim, value: "dim" },
    { label: normal, value: "normal" },
    { label: bright, value: "bright" },
  ]

  return (
    <div className={cn("min-w-0 lg:flex-1", className)}>
      <h2 className="font-semibold">{title}</h2>
      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
      <Select
        items={items}
        value={value}
        onValueChange={(brightness) => {
          if (brightness) onValueChange(brightness)
        }}
      >
        <SelectTrigger aria-label={title} className="mt-2 w-full max-w-40">
          <SunIcon />
          <SelectValue>
            {(selectedValue: Brightness | null) =>
              items.find((item) => item.value === selectedValue)?.label
            }
          </SelectValue>
        </SelectTrigger>
        <SelectContent alignItemWithTrigger={false}>
          {items.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}