<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from "vue";
import PageRandom from "@/components/PageRandom.vue";
import PageInput from "@/components/PageInput.vue";
import { DomainFactory } from "@/lib/factory";
import PageHistory from "./components/PageHistory.vue";

const visible = ref<boolean>(false);
const factory = ref<DomainFactory>(new DomainFactory());

onBeforeMount(() => {
  factory.value.init();
});

onMounted(() => {
  setTimeout(() => {
    visible.value = true;
  });
});
</script>

<template>
  <div :style="{ display: visible ? 'inherit' : 'none' }">
    <div class="tabs tabs-xs tabs-bottom w-xl max-w-svw shrink-0">
      <input
        type="radio"
        name="app_tabs"
        class="tab"
        :aria-label="$t('tab.random')"
        checked
      />
      <div
        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
      >
        <PageRandom :factory="factory" />
      </div>

      <input
        type="radio"
        name="app_tabs"
        class="tab"
        :aria-label="$t('tab.input')"
      />
      <div
        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
      >
        <PageInput :factory="factory" />
      </div>

      <input
        type="radio"
        name="app_tabs"
        class="tab"
        :aria-label="$t('tab.history')"
      />
      <div
        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-x-hidden overflow-y-scroll max-h-96"
      >
        <PageHistory :factory="factory" />
      </div>
    </div>
  </div>
</template>
