import { useMessage } from "@workspace/i18n"
import { MonitorIcon, MoonIcon, SunIcon } from "@workspace/ui/components/icon"
import { cn } from "@workspace/ui/lib/utils"

import { appearanceMessages } from "../messages"
import type { ThemeMode } from "../preferences"
import {
  AppearanceOptionList,
  type AppearanceOption,
} from "./appearance-option-list"

export interface ThemeModeOptionListProps {
  className?: string
  onValueChange: (value: ThemeMode) => void
  value: ThemeMode
}

export function ThemeModeOptionList({
  className,
  onValueChange,
  value,
}: ThemeModeOptionListProps) {
  const title = useMessage(appearanceMessages.themeMode)
  const lightLabel = useMessage(appearanceMessages.lightMode)
  const darkLabel = useMessage(appearanceMessages.darkMode)
  const systemLabel = useMessage(appearanceMessages.followSystem)
  const descriptions: Record<ThemeMode, string> = {
    light: useMessage(appearanceMessages.lightModeDescription),
    dark: useMessage(appearanceMessages.darkModeDescription),
    system: useMessage(appearanceMessages.followSystemDescription),
  }
  const items: readonly AppearanceOption<ThemeMode>[] = [
    { icon: <SunIcon />, label: lightLabel, value: "light" },
    { icon: <MoonIcon />, label: darkLabel, value: "dark" },
    { icon: <MonitorIcon />, label: systemLabel, value: "system" },
  ]

  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">
        {descriptions[value]}
      </p>
      <AppearanceOptionList
        className="mt-2 w-full max-w-64"
        items={items}
        label={title}
        value={value}
        onValueChange={onValueChange}
      />
    </div>
  )
}