<template>
  <div class="lists grid grid-cols-12 items-start gap-6">
    <va-card class="col-span-12 lg:col-span-6 p-4">
      <va-list class="py-4">
        <va-list-label>
          {{ t('lists.customers') }}
        </va-list-label>

        <template v-for="(customer, i) in customers" :key="'item' + customer.id">
          <va-list-item clickable @click="notify(customer.name)">
            <va-list-item-section avatar>
              <va-avatar>
                <img :src="customer.picture" :alt="customer.name" />
              </va-avatar>
            </va-list-item-section>

            <va-list-item-section>
              <va-list-item-label>
                {{ customer.name }}
              </va-list-item-label>

              <va-list-item-label caption>
                {{ customer.address }}
              </va-list-item-label>
            </va-list-item-section>

            <va-list-item-section icon>
              <va-icon name="eye" color="gray" />
            </va-list-item-section>
          </va-list-item>

          <va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" class="my-1" fit />
        </template>
      </va-list>
    </va-card>

    <va-card class="col-span-12 lg:col-span-6 p-4">
      <va-list class="py-4">
        <va-list-label>
          {{ t('lists.starterKit') }}
        </va-list-label>

        <va-list-item class="mb-2" clickable>
          <va-list-item-section>
            <va-list-item-label>Add profile images</va-list-item-label>

            <va-list-item-label caption>You can use PNG or JPG files.</va-list-item-label>
          </va-list-item-section>
        </va-list-item>

        <va-list-item clickable>
          <va-list-item-section>
            <va-list-item-label>Invite friends</va-list-item-label>

            <va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
          </va-list-item-section>
        </va-list-item>

        <va-list-separator fit spaced />

        <va-list-label>
          {{ t('lists.notifications') }}
        </va-list-label>

        <va-list-item class="mb-2">
          <va-checkbox v-model="appBanners" class="mr-2" />

          <va-list-item-section>
            <va-list-item-label>Application Banners</va-list-item-label>

            <va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
          </va-list-item-section>
        </va-list-item>

        <va-list-item class="mb-2">
          <va-checkbox v-model="banners" class="mr-2" />

          <va-list-item-section>
            <va-list-item-label>Banners</va-list-item-label>

            <va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
          </va-list-item-section>
        </va-list-item>

        <va-list-item>
          <va-checkbox v-model="notifications" class="mr-2" />

          <va-list-item-section>
            <va-list-item-label>Midnight Notifications</va-list-item-label>
          </va-list-item-section>
        </va-list-item>
      </va-list>
    </va-card>

    <va-card class="col-span-12 lg:col-span-6 p-4">
      <va-list class="py-4">
        <va-list-label>
          {{ t('lists.recentMessages') }}
        </va-list-label>

        <template v-for="(customer, i) in customers" :key="'item' + customer.id">
          <va-list-item clickable @click="toggleStar(customer)">
            <va-list-item-section icon>
              <va-icon v-if="customer.starred" name="star" color="warning" />
            </va-list-item-section>

            <va-list-item-section avatar>
              <va-avatar>
                <img :src="customer.picture" :alt="customer.name" />
              </va-avatar>
            </va-list-item-section>

            <va-list-item-section>
              <va-list-item-label>
                {{ customer.name }}
              </va-list-item-label>
            </va-list-item-section>

            <va-list-item-section icon>
              <va-icon :name="getGenderIcon(customer.gender)" :color="getGenderColor(customer.gender)" />
            </va-list-item-section>
          </va-list-item>

          <va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" class="my-1" fit />
        </template>

        <va-list-separator fit spaced />

        <va-list-label color="gray">
          {{ t('lists.archieved') }}
        </va-list-label>

        <template v-for="(customer, i) in archived" :key="'item' + customer.id">
          <va-list-item disabled>
            <va-list-item-section icon>
              <va-icon v-if="customer.starred" name="star" color="warning" />
            </va-list-item-section>

            <va-list-item-section avatar>
              <va-avatar>
                <img :src="customer.picture" :alt="customer.name" />
              </va-avatar>
            </va-list-item-section>

            <va-list-item-section>
              <va-list-item-label>
                {{ customer.name }}
              </va-list-item-label>
            </va-list-item-section>
          </va-list-item>

          <va-list-separator v-if="i < archived.length - 1" :key="'separator' + customer.id" class="my-1" fit />
        </template>
      </va-list>
    </va-card>

    <va-card class="col-span-12 lg:col-span-6 p-4">
      <va-list class="py-4">
        <va-list-label>
          {{ t('lists.routerSupport') }}
        </va-list-label>

        <va-list-item :to="{ name: 'maplibre-maps' }">
          <va-list-item-section icon>
            <va-icon name="public" color="danger" />
          </va-list-item-section>

          <va-list-item-section>
            <va-list-item-label>MapLibre Maps</va-list-item-label>
          </va-list-item-section>
        </va-list-item>

        <va-list-item :to="{ name: 'yandex-maps' }">
          <va-list-item-section icon>
            <va-icon name="map" color="danger" />
          </va-list-item-section>

          <va-list-item-section>
            <va-list-item-label>Yandex Maps</va-list-item-label>
          </va-list-item-section>
        </va-list-item>

        <va-list-item :to="{ name: 'leaflet-maps' }">
          <va-list-item-section icon>
            <va-icon name="map_marker" color="danger" />
          </va-list-item-section>

          <va-list-item-section>
            <va-list-item-label>Leaflet Maps</va-list-item-label>
          </va-list-item-section>
        </va-list-item>
      </va-list>
    </va-card>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { useToast } from 'vuestic-ui'
  import data from './data.json'

  const { t } = useI18n()
  const { init: initToast } = useToast()

  const customers = ref(data.slice(0, 5))
  const archived = ref(data.slice(5, 8))
  const appBanners = ref(false)
  const banners = ref(false)
  const notifications = ref(true)

  function getGenderIcon(gender: string) {
    return gender === 'male' ? 'mars' : 'venus'
  }

  function getGenderColor(gender: string) {
    return gender === 'male' ? 'info' : 'success'
  }

  function notify(name: string) {
    initToast({
      message: `Clicked ${name}`,
      position: 'bottom-right',
    })
  }

  function toggleStar(customer: { starred: boolean }) {
    customer.starred = !customer.starred
  }
</script>
