<script lang="ts" setup>
import type { Category, Suggestion, Talent } from '@prisma/client'
import { useTalentsStore } from '~/store/talents'
import { providers } from '~~/types'

useHead({
  title: 'Discover new talents • Arthur Danjou',
})

const categories = ref<Array<{ label: string, slug: string, id: number }>>([{ label: 'All', slug: 'all', id: 0 }])
const { getCategory, setCategory, isFavorite, toggleFavorite } = useTalentsStore()
const { loggedIn, clear } = useUserSession()

const {
  data: talents,
  pending,
} = await useFetch<Array<Talent & { categories: Array<{ category: Category }> }>>('/api/talents', {
  method: 'get',
  query: {
    favorite: isFavorite,
    category: getCategory,
  },
  watch: [isFavorite, getCategory],
})

const {
  data: getCategories,
} = await useFetch<Array<Category>>('/api/categories', { method: 'GET', query: { type: 'TALENT' } })
getCategories.value!.forEach((category: any) => categories.value.push({ label: category.name, slug: category.slug, id: category.id }))

function isCategory(slug: string) {
  return getCategory.value === slug
}

const getMarkerStyle = computed(() => {
  const selected = window.document.getElementById(categories.value.find(category => category.slug === getCategory.value)?.slug || 'all')
  return {
    top: `${selected?.offsetTop}px` || '0px',
    left: `${selected?.offsetLeft === 12 ? 4 : selected?.offsetLeft}px` || '4px',
    height: `${selected?.offsetHeight}px` || '0px',
    width: `${selected?.offsetWidth}px` || '0px',
  }
})

const appConfig = useAppConfig()
function getColor() {
  return `text-${appConfig.ui.primary}-500`
}

const isOpen = ref(false)
const toast = useToast()
const suggestContent = ref<string>('')
async function suggest() {
  if (suggestContent.value.trim().length < 4)
    return

  isOpen.value = false
  await $fetch<Suggestion>('/api/suggestion', {
    method: 'post',
    body: {
      content: suggestContent.value,
    },
  }).then((suggestion) => {
    toast.add({
      title: `Your suggestion for '${suggestion.content}'' has been successfully added`,
      icon: 'i-material-symbols-check-circle-outline-rounded',
      timeout: 4000,
    })
  }).catch(() => {
    toast.add({
      title: 'You already have suggested someone',
      color: 'red',
    })
  })
  suggestContent.value = ''
}
</script>

<template>
  <section class="w-container lg:mt-24 my-8">
    <div class="max-w-2xl space-y-8 md:mb-16 mb-8">
      <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
        Showcasing here, I aim to share and introduce inspiring talents.
      </h1>
      <p class="leading-relaxed text-subtitle">
        You will find a selection of some of the most inspiring web talents I have discovered through my research and work experience. These talents are creative designers, talented web developers, passionate open-source contributors, and much more.
      </p>
    </div>
    <div class="flex justify-center md:justify-start">
      <UButton
        class="mb-8 md:mb-16"
        label="Want to suggest someone ?"
        icon="i-ph-circle-wavy-question-bold"
        @click.prevent="isOpen = true"
      />
    </div>
    <UModal v-model="isOpen">
      <UCard>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <h1 class="text-md font-bold">
                Are you a web talent? Do you want to promote your project? Do you want to launch your career or gain visibility?
              </h1>
            </div>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>
        <div>
          <div v-if="loggedIn" class="flex items-center justify-between gap-4">
            <div class="w-full relative flex items-center">
              <input
                v-model="suggestContent"
                type="text"
                required
                min="4"
                class="w-full rounded-lg p-2 h-10 focus:outline-none bg-gray-100 dark:bg-gray-800"
                placeholder="Suggest one name"
              >
              <UButton
                class="absolute right-1 top-1 rounded-md"
                label="Send"
                :disabled="suggestContent.trim().length < 4"
                variant="solid"
                @click.prevent="suggest()"
              />
            </div>
            <UButton
              variant="outline"
              @click.prevent="clear()"
            >
              Logout
            </UButton>
          </div>
          <div v-else class="flex gap-2 justify-center">
            <UButton
              v-for="provider in providers"
              :key="provider.slug"
              :label="provider.label"
              color="black"
              variant="solid"
              :to="provider.link"
              :icon="provider.icon"
              external
            />
          </div>
        </div>
      </UCard>
    </UModal>
    <div v-if="getCategories" class="sticky z-40 top-[4.8rem] left-0 z-100 flex gap-2 w-full items-center justify-between">
      <div class="flex gap-2 overflow-x-scroll sm:overflow-x-hidden bg-gray-100 dark:bg-gray-800 rounded-lg p-1 relative">
        <ClientOnly>
          <div
            class="absolute duration-300 left-1 ease-out focus:outline-none"
            :style="[getMarkerStyle]"
          >
            <div class="w-full h-full bg-white dark:bg-gray-900 rounded-md shadow-sm" />
          </div>
        </ClientOnly>
        <div
          v-for="category in categories"
          :id="category.slug"
          :key="category.slug"
          class="relative px-3 py-1 text-sm font-medium rounded-md h-8 text-gray-500 dark:text-gray-400 min-w-fit flex items-center justify-center w-full focus:outline-none transition-colors duration-200 ease-out cursor-pointer hover:text-black dark:hover:text-white"
          :class="{ 'text-gray-900 dark:text-white relative': isCategory(category.slug) }"
          @click.prevent="setCategory(category.slug)"
        >
          <p class="w-full">
            {{ category.label }}
          </p>
        </div>
      </div>
      <UPopover>
        <UButton
          :icon="isFavorite ? 'i-mdi-filter-variant-remove' : 'i-mdi-filter-variant'"
          color="primary"
          variant="soft"
          size="lg"
        />
        <template #panel>
          <div
            class="flex p-2 gap-2 items-center cursor-pointer select-none text-subtitle"
            @click.prevent="toggleFavorite()"
          >
            <UIcon v-if="isFavorite" name="i-material-symbols-check-box-outline-rounded" />
            <UIcon v-else name="i-material-symbols-check-box-outline-blank" />
            <p>Show favorites only</p>
          </div>
        </template>
      </UPopover>
    </div>
    <UDivider class="my-2" />
    <div v-if="talents && getCategories" class="mt-8">
      <div v-if="talents.length > 0 && !pending" class="grid grid-cols-1 gap-y-4 md:gap-x-12 md:gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
        <div
          v-for="talent in talents"
          :key="talent.name.toLowerCase().trim()"
          class="group relative flex flex-col justify-between"
        >
          <div class="flex">
            <div class="flex gap-6 items-center">
              <img :src="talent.logo" class="z-20 h-8 w-8 md:h-12 md:w-12 rounded-md">
              <div>
                <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
                  <div class="absolute -inset-y-2 md:-inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
                  <NuxtLink :to="talent.website" target="_blank">
                    <span class="absolute -inset-y-2 md:-inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
                    <div class="flex gap-2 items-center">
                      <h1 class="relative z-10">
                        {{ talent.name }}
                      </h1>
                      <UTooltip v-if="talent.favorite" text="You can set the filter to only show favorites.">
                        <UIcon name="i-ic-round-star" class="z-20 text-amber-500 text-xl font-bold hover:rotate-[143deg] duration-300" />
                      </UTooltip>
                    </div>
                  </NuxtLink>
                </h2>
                <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400">
                  {{ talent.work }}
                </p>
              </div>
            </div>
          </div>
          <div class="flex items-center gap-4 mt-2">
            <p class="relative z-10 flex text-xs md:text-sm font-medium items-center" :class="getColor()">
              <UIcon name="i-ph-link-bold" />
              <span class="ml-2">{{ talent.website.replace('https://', '').replace('/', '') }}</span>
            </p>
            <div class="flex gap-2 z-10 flex-wrap">
              <UBadge
                v-for="category in talent.categories"
                :key="category.category.slug"
                color="primary"
                variant="soft"
                size="xs"
              >
                {{ category.category.name }}
              </UBadge>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="talents?.length === 0 && !pending" class="my-4 text-subtitle">
        <div class="flex gap-2 items-center">
          <UIcon name="i-akar-icons-cross" />
          <p>There are no talents for this category. Maybe soon...</p>
        </div>
      </div>
      <div v-else class="my-4 text-subtitle">
        <div class="flex gap-2 items-center">
          <UIcon name="i-eos-icons-loading" />
          <p>The talents are loading...</p>
        </div>
      </div>
    </div>
  </section>
</template>
