<script setup>
import { ref } from 'vue'
import ContactTable from './components/ContactTable.vue'
import ContactsSummary from './components/ContactsSummary.vue';

const titleClass = ref('title')

const threadId = ref('')
const contactData = ref(null)

function onInput(e) {
  threadId.value = e.target.value
}

async function fetchData() {
  console.log('fetchingData');
  contactData.value = null
  const res = await fetch(`http://localhost:9000/thread-tracker`, {
      credentials: "include" // fetch won't send cookies unless you set credentials
    })
    contactData.value = await res.json()
}

</script>
<template>
  <div id="app">
    <header>
      <h1 :class="titleClass">Thread Tracker</h1>
    </header>


    <input :value="text" @input="onInput" placeholder="Enter threadId here">
    <button @click="fetchData">Fetch Contacts</button>

    <ContactsSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
    <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
    
  </div>
</template>
<style>
.title {
  text-align: center;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
}

#container {
  box-sizing: border-box;
  border: 5px solid gray;
  border-radius: 15%;
  width: 400px;
  height: 400px;
  margin: auto;
}
</style>
