import { useTranslation } from "react-i18n-lite";
import {
  BOOKMARK_HIGHLIGHT_PRESETS,
  normalizeHighlightColor,
} from "@/constants/bookmarkHighlightColors";

interface BookmarkColorPickerProps {
  value: string;
  onChange: (color: string) => void;
}

export function BookmarkColorPicker({ value, onChange }: BookmarkColorPickerProps) {
  const { t } = useTranslation();
  const normalized = normalizeHighlightColor(value);
  const isPreset = BOOKMARK_HIGHLIGHT_PRESETS.some((p) => p.value === normalized);

  return (
    <div className="bookmark-color-picker" role="group" aria-label={t("annotations.highlightColor")}>
      <span className="bookmark-color-picker-label">{t("annotations.highlightColor")}</span>
      <div className="bookmark-color-picker-swatches">
        {BOOKMARK_HIGHLIGHT_PRESETS.map((preset) => (
          <button
            key={preset.id}
            type="button"
            className={`bookmark-color-swatch${normalized === preset.value ? " bookmark-color-swatch--active" : ""}`}
            style={{ backgroundColor: preset.value }}
            title={t(preset.labelKey)}
            aria-label={t(preset.labelKey)}
            aria-pressed={normalized === preset.value}
            onClick={() => onChange(preset.value)}
          />
        ))}
        <label className="bookmark-color-custom" title={t("annotations.highlightCustom")}>
          <input
            type="color"
            className="bookmark-color-custom-input"
            value={normalized}
            onChange={(e) => onChange(e.target.value)}
            aria-label={t("annotations.highlightCustom")}
          />
          <span
            className={`bookmark-color-swatch bookmark-color-swatch--custom${!isPreset ? " bookmark-color-swatch--active" : ""}`}
            style={{ backgroundColor: normalized }}
            aria-hidden
          />
        </label>
      </div>
    </div>
  );
}
