"use client"

import { cn } from "@/lib/utils"
import { Check } from "lucide-react"
import type {
  LabelInMessageListVisibility,
  LabelListSidebarVisibility,
} from "@/lib/stores/nav-store"

function VisibilityOption({
  checked,
  onPick,
  children,
}: {
  checked: boolean
  onPick: () => void
  children: React.ReactNode
}) {
  return (
    <button
      type="button"
      onClick={onPick}
      className={cn(
        "flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
        checked
          ? "bg-accent text-accent-foreground"
          : "text-foreground hover:bg-accent/50"
      )}
    >
      <span>{children}</span>
      <span className="flex size-4 shrink-0 items-center justify-center" aria-hidden={!checked}>
        {checked ? <Check className="size-4" strokeWidth={2} /> : null}
      </span>
    </button>
  )
}

export function NavSidebarVisibilityFields({
  listKind,
  value,
  onChange,
}: {
  listKind: "labels" | "folders"
  value: LabelListSidebarVisibility
  onChange: (v: LabelListSidebarVisibility) => void
}) {
  const section =
    listKind === "labels"
      ? "Dans la liste des libellés"
      : "Dans la liste des dossiers"

  return (
    <fieldset className="space-y-1">
      <legend className="mb-1 text-xs font-medium text-muted-foreground">
        {section}
      </legend>
      <VisibilityOption checked={value === "show"} onPick={() => onChange("show")}>
        Afficher
      </VisibilityOption>
      <VisibilityOption
        checked={value === "showUnread"}
        onPick={() => onChange("showUnread")}
      >
        Afficher si messages non lus
      </VisibilityOption>
      <VisibilityOption checked={value === "hide"} onPick={() => onChange("hide")}>
        Masquer
      </VisibilityOption>
    </fieldset>
  )
}

export function NavMessageVisibilityFields({
  value,
  onChange,
}: {
  value: LabelInMessageListVisibility
  onChange: (v: LabelInMessageListVisibility) => void
}) {
  return (
    <fieldset className="space-y-1">
      <legend className="mb-1 text-xs font-medium text-muted-foreground">
        Dans la liste des messages
      </legend>
      <VisibilityOption checked={value === "show"} onPick={() => onChange("show")}>
        Afficher
      </VisibilityOption>
      <VisibilityOption checked={value === "hide"} onPick={() => onChange("hide")}>
        Masquer
      </VisibilityOption>
    </fieldset>
  )
}