<template>
  <v-slide-group
    v-model="model"
    mandatory
    class="sid_nav"
    show-arrows
    direction="vertical"
    :style="current === 'ar' ? 'right : 15px' : 'left : 15px'"
  >
    <v-slide-group-item
      v-for="(item, index) in items"
      :key="item.id"
      v-slot="{ isSelected, toggle }"
      class="px-1"
    >
      <v-hover>
        <template v-slot="{ isHovering, props }">
          <v-card
            variant="text"
            class="my-1 px-1"
            @click="toggle"
            height="120px"
            v-bind="props"
            :to="item.to"
          >
            <v-card-title
              v-if="item.action === 'route'"
              :class="isSelected ? 'active' : ''"
              class="text-body-2 text-wrap text-white h-100 d-flex flex-column justify-center align-center hover_slide"
              style="border-bottom: 1px solid white"
            >
              <div style="width: 50px; height: 45px">
                <v-img
                  :class="[isSelected ? 'icon' : '', isHovering ? 'icon' : '']"
                  :height="50"
                  :src="iconHandler(index)"
                ></v-img>
              </div>
              <div class="text-center">
                {{ $t(item.title) }}
              </div>
            </v-card-title>

            <v-menu
              v-if="item.action === 'menu'"
              location="start"
              @click="toggle"
            >
              <template v-slot:activator="{ isActive, props }">
                <v-card-title
                  :class="[
                    isSelected ? 'active' : '',
                    isActive ? 'active' : '',
                    isHovering ? 'active' : '',
                  ]"
                  v-bind="props"
                  style="border-bottom: 1px solid white"
                  class="text-body-2 text-wrap text-white h-100 d-flex flex-column justify-center align-center"
                >
                  <div style="width: 50px; height: 45px">
                    <v-img
                      :class="[
                        isSelected ? 'icon' : '',
                        isActive ? 'icon' : '',
                        isHovering ? 'icon' : '',
                      ]"
                      :height="60"
                      :src="iconHandler(index)"
                    ></v-img>
                  </div>
                  <div class="text-center">
                    {{ $t(item.title) }}
                  </div>
                </v-card-title>
              </template>

              <v-list class="list_menu">
                <v-list-item
                  v-for="(item, index) in item.links"
                  :key="index"
                  class="pa-0"
                  :to="item.to"
                >
                  <v-list-item-title class="px-0">{{
                    $t(item.title)
                  }}</v-list-item-title>
                  <template v-slot:prepend>
                    <v-icon>mdi-arrow-left</v-icon>
                  </template>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-card>
        </template>
      </v-hover>
    </v-slide-group-item>
    <template v-slot:next>
      <v-btn
        elevation="0"
        :ripple="false"
        variant="text"
        icon="mdi-chevron-down"
        color="white"
      ></v-btn>
    </template>
    <template v-slot:prev>
      <v-btn
        elevation="0"
        :ripple="false"
        variant="text"
        icon="mdi-chevron-up"
        color="white"
      ></v-btn>
    </template>
  </v-slide-group>
</template>

<script setup>
import { ref } from "vue";
import { useLocale } from "vuetify";

const model = ref(null);
const { current } = useLocale();
const items = [
  {
    id: "1",
    title: "AbouttheAward",
    action: "route",
    to: "/about_award",
  },
  {
    id: "2",
    title: "AwardSponsor",
    action: "route",
    to: "/award_sponsor",
  },
  {
    id: "3",
    title: "PartnersStrategists",
    action: "route",
    to: "/strategic_partners",
  },
  {
    id: "4",
    title: "PreviousSessions",
    action: "menu",
    links: [
      {
        title: "Previouscourses",
        to: "/winners",
      },
      {
        title: "Prizestatistics",
        to: "/award_statistics",
      },
    ],
  },
  {
    id: "5",
    title: "MediaCenter",
    action: "menu",
    links: [
      {
        title: "Awardnews",
        to: "/award_news",
      },
      {
        title: "SocialMedia",
        to: "/social_media",
      },
      {
        title: "Photoandvideogallery",
        to: "/gallery",
      },
      {
        title: "Awardpublications",
        to: "/award_publications",
      },
    ],
  },
  {
    id: "6",
    title: "ContactDetails",
    action: "route",
    to: "/contact_us",
  },
  {
    id: "7",
    title: "AwardSponsor",
    action: "route",
    to: "/award_sponsor",
  },
];
const iconHandler = (index) => {
  console.log(items[index].title);
  return new URL(`/src/assets/slide/${items[index].title}.svg`, import.meta.url)
    .href;
};
</script>

<style scoped>
.sid_nav {
  position: fixed;

  bottom: 20px;
  z-index: 99;
  border-radius: 24px;
  height: 90vh;
  width: 102px;
  background-color: #265073 !important;
}
.active {
  background-color: #ffff !important;
  color: #265073 !important;
}
.hover_slide:hover {
  background-color: white !important;
  color: #265073 !important;
}

.list_menu {
  background-color: #265073 !important;
  color: white;
  padding: 10px 20px;
  width: 250px;
  margin: 0 10px;
  border-radius: 20px !important;
}

.icon {
  filter: invert(50%) sepia(28%) saturate(550%) hue-rotate(173deg)
    brightness(92%) contrast(87%);
}
</style>
