<script setup lang="ts">
import { ref, watch } from 'vue'
import { useSelectedDomain } from '@/hooks/domainInfo'
import ClassifierResult from '@/components/ClassifierResult.vue'
import Planet from '@/components/Planet.vue'
const domain = useSelectedDomain()
const selectedIP = ref('')

watch(domain, () => {
  if (domain.value?.geo_data?.length > 0) {
    selectedIP.value = domain.value.geo_data[0].ip ?? ''
  } else {
    selectedIP.value = ''
  }
})
</script>

<template>
  <div class="details-container">
    <header class="details-header">
      <div class="flavor" aria-hidden="true">/// DOMAIN DETAIL VIEW</div>
      <h1
        class="domain-name-heading"
        :class="{ condensed: (domain?.domain_name.length ?? 0) > 35 }"
      >
        {{ domain?.domain_name ?? 'Select from list' }}
      </h1>
    </header>
    <section class="detail-section planet-container">
      <div class="fsb">
        <h2 v-if="domain?.geo_data">
          IP Locations
          <span v-show="domain">
            ({{ domain?.geo_data.length ?? 0 }})
          </span>
        </h2>
        <select name="ip" v-if="domain?.geo_data" v-model="selectedIP">
          <option v-for="geo in domain?.geo_data" :value="geo.ip">
            {{ geo.ip }}
          </option>
        </select>
      </div>
      <Planet :data="domain?.geo_data ?? []" :selected="selectedIP" />
    </section>
    <section class="detail-section classifiers" v-show="(domain?.results.length ?? 0) > 0">
      <h2>Classifier Outputs</h2>
      <ClassifierResult v-for="result in domain?.results" :key="result.classifier_name" :result="result" />
    </section>
  </div>
</template>

<style>
  .details-container {
    padding: 1rem;
  }

  .details-header {
    background-color: hsl(var(--bg0) / 95%);
    padding-block-end: 0.35em;
    position: sticky;
    top: -0.9em;
    z-index: 20;
  }

  .detail-section h2 {
    color: hsl(var(--accent));
  }

  .flavor {
    font-size: 0.75rem;
    font-weight: bold;
    color: hsl(var(--bg10));
    font-family: "IBM Plex Mono", monospace;
    user-select: none;
  }

  .domain-name-heading {
    margin-block: 0;
    word-break: break-all;
  }

  .condensed {
    font-family: "IBM Plex Sans Condensed" !important;
  }

  .planet-container {
    position: relative;
    height: 40vw;
  }
</style>