<script setup>
  const route = useRoute()

  const { getItems } = useDirectusItems()

  let loading = true
  let domain, zone, whois = null

  const updateQuery = async () => {
    domain = ref(route.query.search ? route.query.search : null)

    useHead({
      title: `Whois Lookup for ${domain.value} | Tinysites`,
      meta: [
        { name: `og:url`, content: `https://www.tinysites.com` },
        { name: `og:title`, content: `Whois Lookup for ${domain.value} | Tinysites` },

        { name: `twitter:url`, content: `https://www.tinysites.com` },
        { name: `twitter:title`, content: `Whois Lookup for ${domain.value} | Tinysites` },
      ],
    })

    zone = zones(domain.value.substr(domain.value.indexOf('.') + 1))
    
    try {
      whois = await getItems({
        collection: "domains",
        params: {
          filter: { domain_name: domain.value },
        },
      })
      loading = false
      
      whois = whois.length > 0 ? whois[0] : null
    } catch (e) {}
    
    loading = false
    update.value += 1
  }

  useHead({
    meta: [
      { name: 'description', content: `` },

      { name: `og:type`, content: `website` },
      { name: `og:description`, content: `` },
      { name: `og:image`, content: `https://www.tinysites.com/img/meta.png` },

      { name: `twitter:card`, content: `summary_large_image` },
      { name: `twitter:description`, content: `` },
      { name: `twitter:image`, content: `https://www.tinysites.com/img/meta.png` },
    ],
  })

  let update = ref(1);
  
  updateQuery()

  watch(() => route.query, async () => {
    loading = true
    updateQuery()
  })

  const host = hostname()

</script>

<template>
  <div class="results">

    <Search />
    
    <div class="loading" v-if="loading" :key="update.value">
      <div class="square"></div>
    </div>

    <div v-if="!loading">
      <div class="unknown" v-if="!zone" :key="update.value">
        <b>'{{ domain }}' contains an unknown extension. See <NuxtLink :to="host + 'docs/domains#micro-registry'" target="_BLANK">extensions</NuxtLink>.</b>
      </div>
      <div class="register" v-if="whois === null && zone" :key="update.value">
        <b>{{ domain }} does not appear registered yet. <NuxtLink :to="host + 'dashboard/domains?search=' + domain" target="_BLANK">Register this domain</NuxtLink></b>
      </div>
      <div class="registered" v-if="whois !== null && zone" :key="update.value">
        <b><NuxtLink :to="'https://' + domain + '/'" target="_BLANK">{{ domain }}</NuxtLink> has already been registered.</b>
      </div>
      <div class="whois" v-if="whois !== null && zone" :key="update.value">
        <h2>Whois data</h2>
        <div class="details">
          <p>Domain Name: {{ whois.domain_name }}</p>
          <p>Registrar: <NuxtLink :to="host" target="_BLANK">Tinysites</NuxtLink></p>
          <p>Updated Date: {{ whois.date_updated }}</p>
          <p>Creation Date: {{ whois.date_created }}</p>
          <p>Registry Expiry Date: {{ whois.date_expire }}</p>
          <p>Registrar Abuse Contact Email: <NuxtLink to="mailto:abuse@tinysites.com">abuse@tinysites.com</NuxtLink></p>
          <p>Domain Status: {{ whois.status }}</p>
          <p>Name Server: {{ whois.ns1 }}</p>
          <p>Name Server: {{ whois.ns2 }}</p>
          <p>DNSSEC: {{ whois.dnssec }}</p>
        </div>
      </div>
    </div>

    <Products />
    <Faq />
  </div>
</template>