"use client";

import { useSyncExternalStore } from "react";

/*
 * O editor no celular e no tablet em pé (o "modo compacto", como o Canva no
 * celular): abaixo de 1024 px de largura. No celular (até 639 px) o trilho
 * vira a barra de baixo e os painéis sobem como gaveta; no tablet o trilho
 * fica e o painel abre por cima da arte. O desktop (1024 px ou mais) nunca
 * entra: lá o editor é exatamente o de sempre.
 */
export type TelaCompacta = "celular" | "tablet" | null;

const DO_TABLET = "(max-width: 1023px)";
const DO_CELULAR = "(max-width: 639px)";

function assinar(avisar: () => void) {
  const tablet = window.matchMedia(DO_TABLET);
  const celular = window.matchMedia(DO_CELULAR);
  tablet.addEventListener("change", avisar);
  celular.addEventListener("change", avisar);
  return () => {
    tablet.removeEventListener("change", avisar);
    celular.removeEventListener("change", avisar);
  };
}

function agora(): TelaCompacta {
  if (window.matchMedia(DO_CELULAR).matches) return "celular";
  if (window.matchMedia(DO_TABLET).matches) return "tablet";
  return null;
}

export function useTelaCompacta(): TelaCompacta {
  return useSyncExternalStore(assinar, agora, () => null);
}