<template>
  <div id="main">

    <UTable
        :rows="projects"
        :columns="projectColumns"
        @select="selectProject"

    />



<!--    <div id="left">
      <UButton @click="showCreateProject = true">+ Projekt</UButton>
      <UModal v-model="showCreateProject">
        <UCard>
          <template #header>
            Projekt erstellen
          </template>

          <UFormGroup
            label="Name:"
          >
            <UInput
              v-model="createProjectData.name"
            />
          </UFormGroup>
          <UFormGroup
            label="Kunde:"
          >
            <USelectMenu
              v-model="createProjectData.customer"
              :options="customers"
              option-attribute="name"
              value-attribute="id"
              searchable
              :search-attributes="['name']"
            />
          </UFormGroup>
          <UFormGroup
            label="Notizen:"
          >
            <UTextarea
              v-model="createProjectData.notes"
            />
          </UFormGroup>

          <template #footer>
            <UButton
              @click="createProject"
            >
              Erstellen
            </UButton>
          </template>
        </UCard>
      </UModal>

      <UTable
          :rows="projects"
          @select="selectCustomer"

      />


      &lt;!&ndash;      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
        <UCard class="listItem">
          <UBadge>{{item.id}}</UBadge> {{item.name}}
        </UCard>
      </router-link>&ndash;&gt;


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

        Kunde:<br>
        {{selectedItem.customer.data.name}}<br>

        Notizen: <br>
        {{selectedItem.notes}}

&lt;!&ndash;        Lieferantenrechnungen: <br>
        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}&ndash;&gt;




      </UCard>
    </div>-->

  </div>

</template>

<script setup>

definePageMeta({
  middleware: "auth"
})

const supabase = useSupabaseClient()
const router = useRouter()
const {projects,customers} = storeToRefs(useDataStore())
const {fetchProjects} = useDataStore()

const projectColumns = [
  {
    key: 'name',
    label: "Name.",
    sortable: true
  },
  {
    key: "customer",
    label: "Kundennummer",
    sortable: true
  },
  {
    key: "notes",
    label: "Notizen",
    sortable: true
  }
]

const selectProject = (project) => {
  router.push(`/projects/${project.id} `)
}


//const projects = (await supabase.from("projects").select()).data
//const customers = (await supabase.from("customers").select()).data

const showCreateProject = ref(false)
const createProjectData = ref({
  phases: []
})

let selectedItem = ref({})

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

const createProject = async () => {
  const {data,error} = await supabase
      .from("projects")
      .insert([createProjectData.value])
      .select()

  if(error) console.log(error)

  showCreateProject.value = false
  createProjectData.value = {phases: []}
  fetchProjects()


}

</script>

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

#right {
  width: 60vw;
  padding-left: 3vw;
}*/
</style>