<template>
  <v-container class="py-6">
    <h1 class="text-h5 mb-4">Playground — eli-vue</h1>



    <v-tabs v-model="aba" color="primary" density="comfortable">
      <v-tab value="botao">Botão</v-tab>
      <v-tab value="indicador">Indicador</v-tab>
      <v-tab value="cartao">Cartão</v-tab>
      <v-tab value="campo">Campo</v-tab>
      <v-tab value="data_hora">Data e hora</v-tab>
      <v-tab value="tabela">Tabela</v-tab>
      <v-tab value="ola_mundo">Demo</v-tab>
    </v-tabs>

    <v-divider class="my-4" />

    <BotaoPlayground v-if="aba === 'botao'" />
    <IndicadorPlayground v-else-if="aba === 'indicador'" />
    <CartaoPlayground v-else-if="aba === 'cartao'" />
    <CampoPlayground v-else-if="aba === 'campo'" />
    <DataHoraPlayground v-else-if="aba === 'data_hora'" />
    <TabelaPlayground v-else-if="aba === 'tabela'" />
    <OlaMundoPlayground v-else />
  </v-container>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import BotaoPlayground from "./botao.playground.vue";
import IndicadorPlayground from "./indicador.playground.vue";
import CartaoPlayground from "./cartao.playground.vue";
import CampoPlayground from "./campo.playground.vue";
import DataHoraPlayground from "./data_hora.playground.vue";
import TabelaPlayground from "./tabela.playground.vue";
import OlaMundoPlayground from "./ola_mundo.playground.vue";

type AbaPlayground =
  | "botao"
  | "indicador"
  | "cartao"
  | "campo"
  | "data_hora"
  | "tabela"
  | "ola_mundo";

const mapaHashParaAba: Record<string, AbaPlayground> = {
  botao: "botao",
  indicador: "indicador",
  cartao: "cartao",
  campo: "campo",
  "data-hora": "data_hora",
  tabela: "tabela",
  demo: "ola_mundo",
};

const mapaAbaParaHash: Record<AbaPlayground, string> = {
  botao: "botao",
  indicador: "indicador",
  cartao: "cartao",
  campo: "campo",
  data_hora: "data-hora",
  tabela: "tabela",
  ola_mundo: "demo",
};

export default defineComponent({
  name: "App",
  components: {
    BotaoPlayground,
    IndicadorPlayground,
    CartaoPlayground,
    CampoPlayground,
    DataHoraPlayground,
    TabelaPlayground,
    OlaMundoPlayground,
  },
  data() {
    return {
      aba: "botao" as AbaPlayground,
      fontVars: {
        eli: "",
        v: "",
        body: "",
      },
      googleSansCheck: "(checando...)" as string,
    };
  },
  mounted() {
    this.sincronizarAbaComHash();
    window.addEventListener("hashchange", this.sincronizarAbaComHash);

    // Coleta variáveis de fonte e confirma carregamento via FontFaceSet.
    this.fontVars.eli = getComputedStyle(document.documentElement).getPropertyValue("--eli-font-family").trim();
    this.fontVars.v = getComputedStyle(document.documentElement).getPropertyValue("--v-font-family").trim();
    this.fontVars.body = getComputedStyle(document.body).fontFamily;

    // Espera fonts carregarem e então checa se o navegador considera Google Sans disponível
    // (isso não garante 100% que TODOS pesos/estilos foram baixados, mas confirma que a face existe/foi carregada)
    document.fonts.ready
      .then(() => {
        this.googleSansCheck = String(document.fonts.check('12px "Google Sans"'));
        // atualiza body depois do load, pois pode mudar após o font-face carregar
        this.fontVars.body = getComputedStyle(document.body).fontFamily;
      })
      .catch(() => {
        this.googleSansCheck = "erro";
      });
  },
  beforeUnmount() {
    window.removeEventListener("hashchange", this.sincronizarAbaComHash);
  },
  watch: {
    aba() {
      this.sincronizarHashComAba();
    },
  },
  methods: {
    normalizarHash() {
      const valor = window.location.hash.replace(/^#\/?/, "").trim();
      return valor;
    },
    sincronizarAbaComHash() {
      const hash = this.normalizarHash();

      const aba = mapaHashParaAba[hash] ?? "botao";

      if (this.aba !== aba) {
        this.aba = aba;
      }

      // Se a URL estiver vazia/fora do padrão, normalizamos.
      this.sincronizarHashComAba();
    },
    sincronizarHashComAba() {
      const destino = `#/${mapaAbaParaHash[this.aba]}`;

      if (window.location.hash !== destino) {
        window.location.hash = destino;
      }
    },
  },
});
</script>
