<script setup lang="ts">
import { useAuthStore } from "@stores/authStore";

// {
//     label: "چت بات",
//     icon: "i-haditha-chat-bot",
//     to: "/haditha/chat-bot",
//     slot: "chat-bot",
//     class: "flex flex-col lg:flex-row justify-center items-center",
//   },

const items = ref([
  {
    label: "حانه",
    icon: "i-haditha-home",
    to: "/haditha",
    descrption: "صفحه اصلی",
    class: "flex flex-col lg:flex-row justify-center items-center hide-label",
  },
  {
    label: "جستجو",
    icon: "i-haditha-search",
    to: "/haditha/search",
    slot: "search",
    class: "flex flex-col lg:flex-row justify-center items-center",
  },

  {
    label: "کتابخانه",
    icon: "i-haditha-library",
    to: "/haditha/library",
    slot: "library",
    class: "flex flex-col lg:flex-row justify-center items-center",
  },

  {
    label: "نشان شده ها",
    icon: "i-haditha-bookmark",
    to: "/haditha/favorites",
    class: "flex flex-col lg:hidden justify-center items-center",
  },

  {
    label: "دیگر",
    icon: "i-haditha-menu",

    class:
      "flex flex-col lg:hidden justify-center items-center hide-chevron other /haditha/other",
    children: [
      {
        label: "ورود / ثبت نام",
        icon: "i-haditha-user",
        to: "/haditha/login",
      },
      {
        label: "کتابخانه",
        icon: "i-haditha-library",
        to: "/haditha/library",
      },
      {
        label: "در باره ما",
        icon: "i-haditha-about-us",
        to: "/haditha/about-us",
      },
      {
        label: "تماس با ما",
        icon: "i-haditha-contact-us",
        to: "/haditha/contact-us",
      },
      {
        label: "قوانین و مقررات",
        icon: "i-haditha-copyright",
        to: "/haditha/rules",
      },
      {
        label: "خروج از حساب",
        icon: "i-haditha-logout",
        type: "button" as const,
        onSelect(e: Event) {
          e.preventDefault();
          logout();
        },
      },
    ],
  },
]);

const leftItem = computed(() => [
  {
    label: "نشان شده ها",
    icon: "i-haditha-bookmark",
    to: "/haditha/favorites",
  },

  {
    label: "Guide",
    icon: "i-haditha-menu",
    children: [
      {
        label: "در باره ما",
        icon: "i-haditha-about-us",
        to: "/haditha/about-us",
      },
      {
        label: "تماس با ما",
        icon: "i-haditha-contact-us",
        to: "/haditha/contact-us",
      },
      {
        label: "قوانین و مقررات",
        icon: "i-haditha-copyright",
        to: "/haditha/rules",
      },
      {
        label: "خروج از حساب",
        icon: "i-haditha-logout",
        type: "button" as const,
        onSelect(e: Event) {
          e.preventDefault();
          logout();
        },
      },
    ],
  },
]);

const isMobile = ref(false);
const rerenderNavigation = ref(1);
const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();

const setMenu = () => {
  if (isAuthenticatedGetter) {
    let otherItem = items.value.find((item) => {
      return item.class.includes("/haditha/other");
    });

    let otherItemChildren = otherItem.children.filter(
      (i) => i.to != "/haditha/login"
    );
    otherItem.children = otherItemChildren;
  } else {
    let otherItem = items.value.find((item) => {
      return item.class.includes("/haditha/other");
    });

    let otherItemChildren = otherItem.children.filter(
      (i) => i.icon != "i-haditha-logout"
    );
    otherItem.children = otherItemChildren;
  }
};

setMenu();

// if(!(isAuthenticatedGetter && isRealUserGetter))
// items.value = items.value.filter((item) => item.to != "/haditha/favorites");

onMounted(() => {
  if (window?.outerWidth < 991) {
    isMobile.value = true;
    items.value = items.value.filter((item) => item.to != "/haditha/library");
    rerenderNavigation.value++;
  }
});
</script>

<template>
  <div class="fixed bottom-2 lg:bottom-auto lg:top-2 right-0 left-0">
    <UContainer class="flex my-navbar mx-3 lg:mx-auto">
      <!-- :disableHoverTrigge="isMobile" -->
      <UNavigationMenu
        :key="rerenderNavigation"
        :items="items"
        content-orientation="vertical"
        :ui="{
          root: 'root grow-1',
          list: 'list md:justify-between lg:justify-start',
          label: 'label',
          item: 'item',
          link: 'link',
          linkLeadingIcon: 'linkLeadingIcon size-8',
          linkLeadingAvatar: 'linkLeadingAvatar',
          linkLeadingAvatarSize: 'linkLeadingAvatarSize',
          linkTrailing: 'linkTrailing',
          linkTrailingBadge: 'linkTrailingBadge',
        }"
      />
      <div class="hidden lg:flex items-center">
        <template v-for="(item, index) in leftItem">
          <UDropdownMenu
            v-if="item.children?.length"
            :items="item.children"
            :ui="{
              content: 'w-48',
              arrow: 'arrow',
              group: 'group',
              label: 'label',
              separator: 'separator',
              item: 'item',
              itemLeadingIcon: 'size-4',
              itemLeadingAvatar: 'itemLeadingAvatar',
              itemLeadingAvatarSize: 'itemLeadingAvatarSize',
              itemTrailing: 'itemTrailing',
            }"
          >
            <UButton
              icon="i-haditha-menu"
              variant="ghost"
              :ui="{
                base: 'string[]',
                label: 'label',
                leadingIcon: 'leadingIcon size-8',
                leadingAvatar: 'leadingAvatar',
                leadingAvatarSize: 'leadingAvatarSize',
                trailingIcon: 'trailingIcon',
              }"
            />
          </UDropdownMenu>

          <ULink
            v-else
            raw
            :to="item.to"
            class="w-full flex justify-center items-center me-3"
            active-class="text-(--color-white) bg-(--ui-primary) link-is-active"
          >
            <UIcon :name="item.icon" class="size-8" />
          </ULink>
        </template>
      </div>
    </UContainer>
  </div>
</template>

<style lang="scss">
.fixed {
  z-index: 999;
  .my-navbar {
    max-width: 75em; //1200px
    height: 4.25em; // 68px;
    border-radius: 1em;
    border-width: 0.3px;
    // justify-content: space-between;
    padding-top: 0.25em;
    padding-right: 1em;
    padding-bottom: 0.25em;
    padding-left: 1em;

    background-color: #fff;
    border: 0.3px solid #e0e0e0;
    box-shadow: 0px 4px 15px 0px #0000001a;

    nav > div {
      width: 100%;
      display: flex;
      flex-direction: column;

      .isolate.min-w-0.flex.items-center.list {
        li {
          padding: 0;

          .group {
            &::before {
              border-radius: 12px;
            }

            &:hover {
              &::before {
                background-color: color-mix(in oklab, #00a762 50%, transparent);
                box-shadow: 0px 4px 10px 0px #00745933;
                border-radius: 0.75em; //12px;
              }
            }

            // max-width: 112px;
            height: 3.5em;
            gap: 4px;
            border-radius: 0.75em;
            padding-top: 0.37em; /*6px*/
            padding-right: 1.2em;
            padding-bottom: 0.37em; /*6px*/
            padding-left: 1.2em;

            font-family: IRANSansX;
            font-weight: 400;
            font-size: 0.87rem; /*14px*/
            line-height: 1.3rem; /*6px*/
            letter-spacing: 0%;
            text-align: center;

            &[data-active=""] {
              background: linear-gradient(
                102.02deg,
                #4be8ae 7.38%,
                #00a762 91.78%
              );
              box-shadow: 0px 4px 10px 0px #00745933;

              * {
                color: #fff;
              }
            }
          }

          .hide-label {
            .truncate {
              display: none;
            }
          }
        }
      }
    }

    .hide-chevron {
      span:last-child {
        display: none;
      }
    }

    .link-is-active {
      width: 64;
      height: 60;
      gap: 4px;
      border-radius: 12px;

      padding-top: 0.875em; /*14px*/
      padding-right: 1em; /*16px*/
      padding-bottom: 0.875em; /*14px*/
      padding-left: 1em; /*16px*/

      background: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
      box-shadow: 0px 4px 10px 0px #00745933;

      // .icon {
      //   width: 24;
      //   height: 24;
      // }

      * {
        color: #fff;
      }
    }
  }
}

@media screen and (max-width: 991.99px) {
  .fixed {
    .my-navbar {
      height: 4.8em; // 76px;

      .absolute.top-full.left-0.flex.w-full {
        width: 200px;
        bottom: 100%;
        top: auto;

        .absolute.top-0.left-0.w-60 {
          width: 200px;
        }
      }

      nav > div {
        ul.isolate.min-w-0.flex.items-center.list {
          li {
            flex: 1;

            .group {
              height: 6em;

              font-size: 10px;
              line-height: 150%;
            }
            .hide-label {
              .truncate {
                display: inline;
              }
            }
          }
        }

        ul.grid.p-2.gap-1 {
          li {
            .group {
              width: 186;
              height: 45;
              gap: 10px;
              border-radius: 8px;
              padding: 12px;

              font-family: IRANSansX;
              font-weight: 400;
              font-size: 14px;
              line-height: 100%;
              letter-spacing: 0%;
              text-align: center;
              vertical-align: middle;

              &:hover {
                background: linear-gradient(
                  320.71deg,
                  #b9fde0 6.56%,
                  #e4f9f0 69.69%
                );
              }
            }
          }
        }
      }
    }
  }
}
</style>