<template>
  <v-container fluid>
    <v-row>
      <v-col class="collections-menu">
        <v-card>
          <v-list nav>
            <v-list-item
              v-for="collection in collections"
              :key="collection.id"
              color="primary"
              :value="collection"
              @click="selectedCollection = collection"
            >
              <template #prepend>
                <v-icon :icon="collection.icon" />
              </template>

              <v-list-item-title>{{ collection.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>
      <v-col>
        <v-card v-if="selectedCollection">
          <v-card-title />
          <v-card-text>
            <v-row>
              <v-col>
                <h3>Collections > {{ selectedCollection.title }}</h3>
              </v-col>
              <v-col class="text-right">
                <v-btn icon="mdi-cog-outline" @click="onEditCollection" />
                <v-btn icon="mdi-refresh" />
              </v-col>
            </v-row>

            <div class="mt-3">
              <v-text-field placeholder="Search" />
            </div>
            <div>
              <v-data-table
                :headers="headers"
                hide-default-footer
                item-key="name"
                :items="items"
              />
            </div>
            <div class="mt-4 text-center">
              <v-btn color="primary" prepend-icon="mdi-plus">Add record</v-btn>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>


  </v-container>
</template>
<script setup lang="ts">
  import {onMounted, ref} from 'vue'
  import {useRouter} from "vue-router";

  const router = useRouter()

  const collections = ref([
    { id: 1, title: 'users', icon: 'mdi-account' },
    { id: 2, title: 'items', icon: 'mdi-folder-outline' },
    { id: 3, title: 'carts', icon: 'mdi-folder-outline' },
  ])

  const selectedCollection = ref(null)

  onMounted(() => {
    selectedCollection.value = collections.value[0]
  })

  const headers = ref([
    { title: 'Pyramid', value: 'name' },
    { title: 'Location', value: 'location' },
    { title: 'Construction Date', value: 'constructionDate' },
  ])

  const items = ref([
    {
      name: 'Great Pyramid of Giza',
      location: 'Egypt',
      constructionDate: 'c. 2580–2560 BC',
    },
    {
      name: 'Pyramid of Khafre',
      location: 'Egypt',
      constructionDate: 'c. 2570 BC',
    },
    {
      name: 'Red Pyramid',
      location: 'Egypt',
      constructionDate: 'c. 2590 BC',
    },
    {
      name: 'Bent Pyramid',
      location: 'Egypt',
      constructionDate: 'c. 2600 BC',
    },
    {
      name: 'Pyramid of the Sun',
      location: 'Mexico',
      constructionDate: 'c. 200 CE',
    },
  ])

  function onEditCollection () {
    router.push(`/collections/${selectedCollection.value.id}/edit`)
  }
</script>

<style scoped lang="scss">
.collections-menu {
  max-width: 300px;
}
</style>
