<script setup>
import { useModalLoginOpen } from '@layouts/stores/config'
import { useWindowSize } from '@vueuse/core'

import EventosHome from '@/pages/apps/eventos/eventos-home.vue'
import VagasHome from '@/pages/vagas/vagas-home.vue'
import ServicosHome from '@/pages/apps/servicos/servicos-home.vue'

import imageSkeleton from "@images/skeleton/image-loading.webp"
import imageNotAvailable from "@images/skeleton/no-image-available.png"
import noImage from "@images/skeleton/no-image.jpg"
import logo from "@images/logo.png"

import playStore from "@images/play-store.png"
import hand_phone from "@images/icons/hand_phone_1.webp"

const { setAlert } = useAlert()

definePage({
  meta: {
    public: true
  },
})

const { width: windowWidth } = useWindowSize();

const route = useRoute()
const router = useRouter()
const modalLoginOpen = useModalLoginOpen()

const isMobile = ref(false)
isMobile.value = windowWidth.value < 768

const userData = useCookie("userData").value
const logged = ref(userData?.id !== null && userData?.id !== undefined)

const carouselSteps = ref(0)
const images = ref([])
const icons = ref([])

const loadingImages = ref(false)

const getImagens = async () => {

  loadingImages.value = true
  try {
    const res = await $api('/options/get', {
      method: 'GET'
    })

    if (!res) return

    console.log('Resposta imagens', res)

    images.value = res.filter(r => r.type === 'banners_images').length > 0 ? res.filter(r => r.type === 'banners_images')[0].value : []
    let iconsres = res.filter(r => r.type === 'icons_iniciais').length > 0 ? res.filter(r => r.type === 'icons_iniciais')[0].value : []
    icons.value = iconsres.map(icon => {
      return {
        icon: icon.url,
        title: icon.title,
        action: icon.action
      }
    })


  } catch (error) {
    console.error('Erro ao buscar imagens', error, error.response)
  }

  loadingImages.value = false
}

const handleBannerAction = (action) => {
  if (action.startsWith("http")) {
    window.open(action, "_blank")
  } else {
    router.push(action)
  }
}


watch(windowWidth, (value) => {
  isMobile.value = value < 768
})


const categoriaSelected = ref('Vestuário')

const categorias = [
  {
    title: 'Vestuário',
    icon: 'tabler-shirt',
  },
  {
    title: 'Calçados',
    icon: 'tabler-shoe',
  },
  {
    title: 'Acessórios',
    icon: 'tabler-umbrella',
  },
  {
    title: 'Eletrônicos',
    icon: 'tabler-device-mobile',
  },
  {
    title: 'Móveis',
    icon: 'tabler-sofa',
  },
  {
    title: 'Decoração',
    icon: 'tabler-lamp',
  },
  {
    title: 'Beleza',
    icon: 'tabler-face-id',
  },
  {
    title: 'Esportes',
    icon: 'tabler-ball-football',
  },
  {
    title: 'Casa',
    icon: 'tabler-home',
  },
  {
    title: 'Construção',
    icon: 'tabler-hammer',
  },
  {
    title: 'Educação',
    icon: 'tabler-book',
  },
  {
    title: 'Viagens',
    icon: 'tabler-plane-tilt',
  },
  {
    title: 'Animais',
    icon: 'tabler-dog',
  },
  {
    title: 'Outros',
    icon: 'tabler-plus',
  }
]

onMounted(() => {
  getImagens()
})
</script>

<template>

  <VCarousel v-model="carouselSteps" :height="!isMobile ? '245px' : '190px'"
    style="position: relative; max-width: 1280px" class="carrosel-home mx-auto mb-3" :show-arrows="!isMobile" cycle
    hide-delimiters :interval="5000">


    <template v-slot:prev="{ props }">
      <v-btn variant="elevated" icon @click="props.onClick"
        :color="carouselSteps == 0 || carouselSteps == 4 ? '#031c45' : 'primary'" size="small">
        <v-icon icon="tabler-caret-left-filled" color="white" size="25" />
      </v-btn>
    </template>
    <template v-slot:next="{ props }">
      <v-btn variant="elevated" icon @click="props.onClick"
        :color="carouselSteps == 0 || carouselSteps == 4 ? '#031c45' : 'primary'" size="small">
        <v-icon icon="tabler-caret-right-filled" color="white" size="25" />
      </v-btn>
    </template>


    <VCarouselItem :rounded="10" position="center" v-if="loadingImages">
      <v-skeleton-loader type="image" style="border-radius: 15px; height: 150px;"></v-skeleton-loader>
    </VCarouselItem>
    <template v-for="(image, index) in images" :key="index" v-else>
      <VCarouselItem :src="!isMobile ? image.urlD ?? noImage : image.urlM ?? noImage" :cover="true"
        :lazy-src="!isMobile ? image.urlD : image.urlM" @click="handleBannerAction(image.action)" :rounded="10"
        position="center">
        <template #placeholder>
          <v-skeleton-loader type="image" style="border-radius: 15px; height: 150px;"></v-skeleton-loader>
        </template>
        <template #error>
          <VImg :src="imageNotAvailable" />
        </template>
      </VCarouselItem>
    </template>
  </VCarousel>

  <div class="d-flex justify-center">
    <v-btn-toggle v-model="carouselSteps" variant="plain">
      <v-btn v-for="(image, index) in images" :key="index" :value="index" height="12"
        :color="carouselSteps === index ? 'primary' : ''" size="x-small" rounded>
        <!--<v-icon :icon="carouselSteps === index ? 'tabler-circle-filled' : 'tabler-circle'" size="13" />-->
        <div class="rounded-full"
          :style="`background-color: ${carouselSteps === index ? 'var(--color-akkiperto)' : '#d1d1d1'}; width: 30px; height: 3px;`">
        </div>
      </v-btn>
    </v-btn-toggle>
  </div>


  <div class="d-flex flex-wrap align-center justify-center gap-11" v-if="!isMobile">
    <div class="cursor-pointer icon-home" v-for="(icon, index) in icons" :key="index"
      @click="handleBannerAction(icon.action)">
      <VImg :src="icon.icon" alt="Icon" width="80" />
      <p class="mb-0 w-100 mt-2 text-center">{{ icon.title }}</p>
    </div>
  </div>

  <v-slide-group :show-arrows="false" center-active class="position-relative justify-center w-100" v-else>
    <v-slide-group-item v-for="(icon, index) in icons" :key="index" class="py-3">
      <div class="pa-3" @click="handleBannerAction(icon.action)">
        <VImg :src="icon.icon" alt="Icon" width="80" />
        <p class="mb-0 mt-2 w-100 text-center">{{ icon.title }}</p>
      </div>
    </v-slide-group-item>
  </v-slide-group>


  <VCard class="mt-12 mb-2 mx-auto" style="max-width: 1280px" elevation="0">
    <VCardText>
      <VRow>
        <VCol cols="12" class="d-flex flex-sm-row flex-column gap-3 align-center" v-if="!isMobile">
          <VIcon icon="tabler-briefcase" size="30" />
          <div>
            <h4 class="mb-0">
              Oportunidades para sua carreira
            </h4>
            <RouterLink class="mb-2 mt-3" to="/meu-curriculo">Cadastre seu currículo, <strong>é grátis!</strong>
            </RouterLink>
          </div>

          <VBtn color="primary" class="ml-auto" @click="router.push('/vagas')"
            :class="`mt-3 ${isMobile ? 'w-100' : ''}`" :style="isMobile ? 'height: 45px;' : ''">
            <span class="text-none">Ver todas as vagas</span>
            <VIcon icon="tabler-caret-right-filled" class="ml-3" />
          </VBtn>
        </VCol>
        <VCol cols="12" class="d-flex flex-sm-row flex-column gap-3" v-if="isMobile">
          <div class="d-flex flex-row gap-3 align-center">
            <VIcon icon="tabler-briefcase" size="30" />
            <div>
              <h4 class="mb-0">
                Oportunidades para sua carreira
              </h4>
              <RouterLink class="mb-2 mt-3" to="/meu-curriculo">Cadastre seu currículo, <strong>é grátis!</strong>
              </RouterLink>
            </div>
          </div>

          <VBtn color="primary" class="ml-auto" @click="router.push('/vagas')"
            :class="`mt-3 ${isMobile ? 'w-100' : ''}`" :style="isMobile ? 'height: 45px;' : ''">
            <span class="text-none">Ver todas as vagas</span>
            <VIcon icon="tabler-caret-right-filled" class="ml-3" />
          </VBtn>
        </VCol>
        <VCol cols="12" class="pa-0">
          <VagasHome />
        </VCol>
      </VRow>
    </VCardText>
  </VCard>

  <VRow class="mt-12 mb-2 mx-auto pa-0" style="max-width: 1280px" elevation="0">
    <VCol cols="12" md="6" class="pa-0">
      <VCard elevation="0" color="#031c45" class="mr-sm-5 mb-5 mb-sm-0">
        <VCardText>
          <h3 class="text-white">Quer um emprego?</h3>
          <p>Encontre as melhores vagas de emprego perto de você.</p>
          <VBtn color="white" @click="router.push('/vagas')" variant="tonal" :class="`mt-3 ${isMobile ? 'w-100' : ''}`"
            :style="isMobile ? 'height: 45px;' : ''">
            <span class="text-none">Ver vagas</span>
            <VIcon icon="tabler-chevron-right" class="ml-3" />
          </VBtn>
        </VCardText>
      </VCard>
    </VCol>
    <VCol cols="12" md="6" class="pa-0">
      <VCard elevation="0" color="primary">
        <VCardText>
          <h3 class="text-white">Quer contratar?</h3>
          <p>Encontre os os melhores candidatos perto da sua empresa, rápido e <strong>grátis</strong>.</p>
          <VBtn color="white"
            @click="handleBannerAction('https://gestor.akkiperto.com.br/seja-um-gestor?gestor=recrutador')"
            variant="tonal" :class="`mt-3 ${isMobile ? 'w-100' : ''}`" :style="isMobile ? 'height: 45px;' : ''">
            <span class="text-none">Anunciar</span>
            <VIcon icon="tabler-chevron-right" class="ml-3" />
          </VBtn>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>

  <VCard class="mt-15 mx-auto" style="max-width: 1280px">
    <VCardText>
      <VRow>
        <VCol cols="12" class="text-center">
          <h3 class="mb-0 text-primary">
            <VIcon icon="tabler-ticket" />
            Viva a experiência AkkiPerto
          </h3>
          <p class="mb-0">Fuja da rotina com os melhores eventos perto de você.</p>
        </VCol>
        <VCol cols="12">
          <EventosHome />
        </VCol>
        <VCol cols="12" align="middle">
          <VBtn color="primary" @click="router.push('/eventos')" variant="tonal"
            :class="`mt-3 ${isMobile ? 'w-100' : ''}`" :style="isMobile ? 'height: 45px;' : ''">
            <span class="text-none">Ver todos os próximos eventos</span>
            <VIcon icon="tabler-chevron-right" class="ml-3" />
          </VBtn>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>

  <VCard class="mt-15 mx-auto" color="#031c45" style="max-width: 1280px">
    <VCardText>
      <div class="d-flex align-center flex-column justify-center h-100 text-center my-8">
        <h3 class="text-white">
          Anuncie seu evento no AkkiPerto
        </h3>
        <p class="text-white">Divulgue seu evento para milhares de pessoas e gerencie suas vendas em um só lugar.</p>
        <VBtn color="white"
          @click="handleBannerAction('https://gestor.akkiperto.com.br/seja-um-gestor?gestor=promotor')"
          :class="`mt-3 ${isMobile ? 'w-100' : ''}`" style="height: 45px;">
          <span class="text-none text-primary">Anunciar evento</span>
          <VIcon icon="tabler-chevron-right" color="primary" class="ml-3" />
        </VBtn>
      </div>
    </VCardText>
  </VCard>

  <VCard class="mt-10 mx-auto" elevation="2" style="max-width: 1280px">
    <VCardText>
      <VRow>
        <VCol cols="12" class="text-center">
          <h3 class="mb-0">
            <VIcon icon="tabler-building-store" />
            Produtos
          </h3>
          <p class="mb-3">Explore nossas categorias</p>

          <v-slide-group :show-arrows="false" mobile-breakpoint="sm">
            <v-slide-group-item v-for="(categoria, index) in categorias" :key="index">

              <v-card class="px-2 py-3 ml-2" elevation="0" @click="router.push('/construcao')"
                :variant="categoriaSelected == categoria.title ? 'elevated' : 'tonal'" color="primary"
                style="min-width: 100px; max-width: 100px;">
                <v-icon :icon="categoria.icon" size="30" class="mx-auto" />
                <p class="text-center mb-0 mt-1" style="font-size: 13px;">{{ categoria.title }}</p>
              </v-card>

            </v-slide-group-item>
          </v-slide-group>

        </VCol>

        <!-- categoriaSelected = categoria.title <VCol cols="12">
          <p class="text-center font-weight-bold mt-4">
            <VIcon icon="tabler-mood-sad" size="22" color="primary" />
            Nenhum produto disponível no momento.
          </p>
        </VCol>

        <VCol cols="12" align="middle">
          <VBtn color="primary" @click="router.push('/construcao')" variant="tonal"
            :class="`mt-3 ${isMobile ? 'w-100' : ''}`" :style="isMobile ? 'height: 45px;' : ''">
            <span class="text-none">Ver todos os produtos</span>
            <VIcon icon="tabler-chevron-right" class="ml-3" />
          </VBtn>
        </VCol> -->
      </VRow>
    </VCardText>
  </VCard>

  <VRow class="mt-12 mb-2 mx-auto pa-0 match-height" style="max-width: 1280px" elevation="0">
    <VCol cols="12" md="6" class="pa-0">
      <VCard elevation="0" color="#031c45" class="mr-sm-5 mb-5 mb-sm-0">
        <VCardText>
          <VRow>

            <VCol cols="8">
              <h3 class="text-white">Venda seus produtos</h3>
              <p>No AkkiPerto você vende seus produtos de forma rápida e segura.</p>
              <VBtn color="white"
                @click="handleBannerAction('https://gestor.akkiperto.com.br/seja-um-gestor?gestor=vendedor')"
                variant="tonal" :class="`mt-3 ${isMobile ? 'w-100' : ''}`" :style="isMobile ? 'height: 45px;' : ''">
                <span class="text-none">Vender</span>
                <VIcon icon="tabler-chevron-right" class="ml-3" />
              </VBtn>
            </VCol>

            <VCol cols="4" class="d-flex align-center justify-center">
              <VIcon icon="tabler-shopping-cart" size="100" class="mx-auto" />
            </VCol>

          </VRow>
        </VCardText>
      </VCard>
    </VCol>
    <VCol cols="12" md="6" class="pa-0">
      <VCard elevation="0" color="primary">
        <VCardText>
          <VRow>

            <VCol cols="8">
              <h3 class="text-white">Seja um entregador</h3>
              <p>Faça entregas e ganhe dinheiro com o AkkiPerto.</p>
              <VBtn color="white"
                @click="handleBannerAction('https://gestor.akkiperto.com.br/seja-um-gestor?gestor=entregador')"
                variant="tonal" :class="`mt-3 ${isMobile ? 'w-100' : ''}`" :style="isMobile ? 'height: 45px;' : ''">
                <span class="text-none">Entregar</span>
                <VIcon icon="tabler-chevron-right" class="ml-3" />
              </VBtn>
            </VCol>

            <VCol cols="4" class="d-flex align-center justify-center">
              <VIcon icon="tabler-motorbike" size="100" class="mx-auto" />
            </VCol>

          </VRow>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>


  <VRow class="mt-10 mx-auto" style="max-width: 1280px">
    <VCol cols="12" class="text-center">
      <h3 class="mb-0">
        <VIcon icon="tabler-tools" />
        Profissionais e Serviços
      </h3>
      <p class="mb-0 text-primary">Encontre melhores profissionais perto de você.</p>
    </VCol>

    <VCol cols="12">
      <ServicosHome />
    </VCol>

    <VCol cols="12" align="middle" class="d-flex flex-column justify-center align-center">
      <VBtn color="primary" @click="router.push('/construcao')" variant="tonal"
        :class="`mt-3 ${isMobile ? 'w-100' : ''}`" style="height: 45px">
        <span class="text-none">Ver todos os profissionais</span>
        <VIcon icon="tabler-chevron-right" class="ml-3" />
      </VBtn>
      <a class="mb-2 mt-5"
        @click="handleBannerAction('https://gestor.akkiperto.com.br/seja-um-gestor?gestor=prestador-servicos')">
        Você é um prestador de serviço? <strong>Junte-se a nós!</strong>
      </a>
    </VCol>
  </VRow>

  <VCard color="primary" class="mt-10 overflow-visible">
    <VCardText :style="isMobile ? 'height: 450px; margin-bottom: 100px;' : 'height: 400px; margin-bottom: 100px;'">
      <VRow>
        <VCol cols="12" md="6" v-if="isMobile">
          <h3 class="text-white text-center mt-4 w-100">Faça o download do nosso aplicativo</h3>
          <p :class="`mb-5 text-center w-100`">Tenha tudo <strong>AkkiPerto</strong> na palma da sua mão.</p>
          <VImg :src="playStore" alt="PlayStore" width="150" class="mx-auto cursor-pointer" height="50"
            @click="handleBannerAction('https://play.google.com/store/apps/details?id=br.com.akkiperto.app')" />
        </VCol>
        <VCol cols="12" md="6" class="d-flex align-center justify-center" v-else>
          <div style="margin-top: -120px">
            <h2 class="text-white w-100">Faça o download do nosso aplicativo</h2>
            <p class="w-100">Tenha tudo <strong>AkkiPerto</strong> na palma da sua mão.</p>
            <VImg :src="playStore" alt="PlayStore" width="150" class="cursor-pointer" height="50"
              @click="handleBannerAction('https://play.google.com/store/apps/details?id=br.com.akkiperto.app')" />
          </div>
        </VCol>
        <VCol cols="12" md="6" align="center" class="pa-0 ma-0">
          <VImg :src="hand_phone" alt="Hand Phone" width="450" style="margin-top: 50px" />
          <!--style="margin-bottom: -150px; margin-top: 130px;"-->
        </VCol>
      </VRow>
    </VCardText>
  </VCard>

</template>

<style scoped>
.carrosel-home {
  border-radius: 10px;
  /*overflow: visible !important;*/
}

.carrosel-home .v-carousel-item {
  cursor: pointer !important;
}

.icon-home:hover .v-img {
  width: 88px !important;
  transition: .3s;
}

.icon-home:hover {
  opacity: 0.8;
  transition: .3s;
}

.icon-home {
  transition: .3s;
}
</style>
