<template>
  <div id="main">
<!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
    <div id="left">

      <UButton @click="showCreateCustomer = true">+ Kunde</UButton>
      <UModal v-model="showCreateCustomer">
        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
          <template #header>
            Kunde erstellen
          </template>

          <UForm @submit="createCustomer">
            <UFormGroup label="Name:" required>
              <UInput v-model="customerInfo.name"/>
            </UFormGroup>
            <UFormGroup label="Kundenummer:" required>
              <UInput type="number" v-model="customerInfo.customerNumber"/>
            </UFormGroup>
            <UButton type="submit">
              Erstellen
            </UButton>
          </UForm>


        </UCard>
      </UModal>


      <a v-for="item in customers" @click="selectItem(item)">
        <UCard class="listItem">
          <UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
        </UCard>
      </a>



    </div>
    <div id="right">

      <UCard v-if="selectedItem.id">
        <template #header>
          <UBadge>{{selectedItem.customerNumber}}</UBadge> {{selectedItem.name}}
        </template>

        Kontakte:<br>
<!--        <ul>
          <li v-for="contact in selectedItem.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
        </ul>-->
<!--        {{selectedItem.contacts.data}}-->
        <br>
        Projekte:<br>
<!--        <ul>
          <li v-for="project in selectedItem.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.name}}</router-link></li>
        </ul>-->

        <br><br>



<!-- TODO: Scrollcontainer      -->
      </UCard>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: "auth"
})

const supabase = useSupabaseClient()

const {customers } = storeToRefs(useDataStore())


let showCreateCustomer = ref(false)
let customerInfo = ref({
  name: "",
  customerNumber: 0
})


let selectedItem = ref({})

const selectItem = (item) => {
  selectedItem.value = item
}

const createCustomer = async () => {
  //await create('customers', customerInfo.value)
  const {data,error} = await supabase
      .from("customers")
      .insert([customerInfo.value])
      .select()

  console.log(error)


  customerInfo.value = {}
  showCreateCustomer.value = false
}

</script>

<style scoped>
#main {
  display: flex;
  flex-direction: row;
}
#left {
  width: 25vw;
}

#right {
  width: 60vw;
  padding-left: 3vw;
}


</style>