<script setup lang="ts">
import { ref, onBeforeMount, watch, defineAsyncComponent } from "vue";
import { isDomainAvailable } from "@/lib/whois";
import type { DomainFactory } from "@/lib/factory";
const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
import type { Domain } from "@/types";
import { useI18n } from "vue-i18n";

enum State {
  Loading,
  Ready,
  Generating,
  Fetching,
  Error,
}

const props = defineProps<{ factory: DomainFactory }>();

const domain = ref<Domain | null>(null);
const state = ref<State>(State.Loading);

const i18n = useI18n();

function newDomain() {
  if (!props.factory.error) {
    state.value = State.Generating;
    props.factory
      .next(i18n.locale.value)
      .then((newDomain: Domain) => {
        domain.value = newDomain;
        checkAvailability();
      })
      .catch((err: unknown) => {
        state.value = State.Error;
        throw err;
      });
  }
}

function checkAvailability() {
  if (domain.value) {
    const promiseDomain = domain.value;
    domain.value.searching = true;
    state.value = State.Fetching;
    isDomainAvailable(domain.value)
      .then((available: boolean) => {
        if (domain.value?.name !== promiseDomain.name) {
          return; // domain changed
        }
        if (!available) {
          newDomain();
        } else {
          state.value = State.Ready;
        }
      })
      .catch((err: unknown) => {
        state.value = State.Error;
        throw err;
      });
  }
}

function removeExt() {
  if (domain.value) {
    props.factory.removeExtensions(domain.value.extension);
    newDomain();
  }
}

function getTextClass() {
  if (!domain.value || domain.value.name.length < 15) {
    return "text-5xl";
  }
  if (domain.value.name.length < 20) {
    return "text-4xl";
  }
  if (domain.value.name.length < 25) {
    return "text-3xl";
  }
  if (domain.value.name.length < 30) {
    return "text-2xl";
  }
  return "text-xl";
}

onBeforeMount(newDomain);
watch(i18n.locale, newDomain);
</script>

<template>
  <div>
    <h1 class="font-bold" :class="getTextClass()">
      <span v-if="!domain" class="loading loading-spinner loading-xl"></span>
      <span v-else><CoolDomain :domain="domain" xl /></span>
    </h1>
    <p v-if="state === State.Loading" class="py-6">
      {{ $t("page_random.state.loading") }}
      <span class="loading loading-dots loading-xs"></span>
    </p>
    <p v-else-if="state === State.Generating" class="py-6">
      {{ $t("page_random.state.generating") }}
      <span class="loading loading-dots loading-xs"></span>
    </p>
    <p v-else-if="state === State.Fetching" class="py-6">
      {{ $t("page_random.state.fetching") }}
      <span class="loading loading-dots loading-xs"></span>
    </p>
    <div v-else-if="state === State.Ready && domain?.available" class="py-6">
      {{ $t("this_domain") }} {{ $t("seems") }}
      <a
        :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.extension}`"
        target="_blank"
        class="underline"
        >{{ $t("available") }}</a
      >
      !
    </div>
    <div v-else-if="state === State.Ready && !domain?.available" class="py-6">
      {{ $t("this_domain") }} {{ $t("is_unavailable") }}
    </div>
    <div v-else-if="state === State.Error" class="py-6">
      {{ $t("error") }}
    </div>
    <button
      :disabled="state === State.Loading || state === State.Generating || state === State.Error"
      class="btn btn-primary"
      @click="newDomain"
    >
      {{ $t("button.new_domain") }}
    </button>
    <br />
    <p v-if="domain">
      <small
        ><a class="underline" href="#" @click.prevent="removeExt">{{
          $t("page_random.dont_suggest", { ext: `.${domain.extension}` })
        }}</a></small
      >
    </p>
    <p v-else>&nbsp;</p>
  </div>
</template>
