"use client";

import { useEffect, useState } from "react";

const scales = [100, 110, 125] as const;
type Scale = (typeof scales)[number];

function isScale(value: string | null): value is `${Scale}` {
  return value === "100" || value === "110" || value === "125";
}

export default function AccessibilityControls() {
  const [scale, setScale] = useState<Scale>(110);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const stored = window.localStorage.getItem("autovistoria-interface-scale");
    const value = isScale(stored) ? Number(stored) as Scale : 110;
    setScale(value);
    document.body.dataset.interfaceScale = String(value);
  }, []);

  function change(next: Scale) {
    setScale(next);
    document.body.dataset.interfaceScale = String(next);
    window.localStorage.setItem("autovistoria-interface-scale", String(next));
  }

  const position = scales.indexOf(scale);
  return <aside className="accessibility-controls" aria-label="Acessibilidade de leitura">
    {open && <div id="accessibility-panel" className="accessibility-panel" role="group" aria-label="Tamanho do texto">
      <strong>Tamanho da leitura</strong>
      <p>Escolha uma escala confortável. A preferência será mantida neste dispositivo.</p>
      <div>
        <button type="button" onClick={() => change(scales[Math.max(0, position - 1)])} disabled={position === 0} aria-label="Diminuir tamanho do texto">A−</button>
        <button type="button" className="accessibility-reset" onClick={() => change(110)} aria-label="Restaurar tamanho padrão">{scale}%</button>
        <button type="button" onClick={() => change(scales[Math.min(scales.length - 1, position + 1)])} disabled={position === scales.length - 1} aria-label="Aumentar tamanho do texto">A+</button>
      </div>
    </div>}
    <button type="button" className="accessibility-toggle" onClick={() => setOpen((value) => !value)} aria-expanded={open} aria-controls="accessibility-panel">
      <span aria-hidden="true">A</span><b>Acessibilidade</b>
    </button>
  </aside>;
}