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

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

onBeforeMount(() => {});

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>
