<script setup lang="ts">
import { iconSideChevron } from "@/components/sidebar/icons";

interface IPropsItem {
  name: string;
  route: string;
  active: boolean;
}

interface iArray extends IPropsItem {}

interface IProps {
  name: string;
  active: boolean;
  open: boolean;
  routes: iArray[];
  hover: boolean;
}

const props = withDefaults(defineProps<IProps>(), {
  name: "Defina o nome a ser exibido",
  active: false,
  open: false,
  routes: () => [],
  hover: false,
});

const emit = defineEmits(["changeItem", "changeSubItem", "click"]);

function sendActiveItem(name: string) {
  emit("changeItem", name);
}

function sendActiveSubItem(subItem: IPropsItem) {
  emit("changeSubItem", subItem);
}

function emitClick(event: KeyboardEvent) {
  if (event.keyCode === 13 || event.key === "Enter") {
    emit("changeItem", props.name, true);
  }
}
</script>
<template>
  <div class="items" @keydown="emitClick">
    <div
      :ref="props.name"
      tabindex="0"
      :class="{ active: props.active }"
      class="item"
      @click="sendActiveItem(props.name)"
    >
      <div>
        <div>
          <slot />
        </div>
        <h1 :class="{ hover: props.hover }">{{ name }}</h1>
      </div>
      <iconSideChevron :active="props.active" />
    </div>
    <Transition name="accordion">
      <div v-show="props.open" :class="{ animation: props.open }" class="sub-items">
        <div v-for="(subItem, index) in props.routes" :key="index">
          <router-link
            :class="{ active: subItem.active }"
            :to="{ name: subItem.route }"
            @click="sendActiveSubItem(subItem)"
          >
            {{ subItem.name }}
          </router-link>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
.accordion-enter-active,
.accordion-leave-active {
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
}

.accordion-enter-from,
.accordion-leave-to {
  max-height: 0;
  opacity: 0;
}

.accordion-enter-to,
.accordion-leave-from {
  max-height: 1000px;
  opacity: 1;
}

.items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);

  &:focus-visible {
    transition: none;
    outline: 1.5px solid var(--primary-500);
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    height: 55px;
    padding: 0 var(--spacing-4);
    transition: var(--transition);
    border-radius: var(--radius-lg);

    &:focus-visible {
      transition: none;
      outline: 1.5px solid var(--primary-500);
    }

    div {
      display: flex;
      align-items: center;
      gap: var(--spacing-6);
    }

    h1 {
      color: var(--gray-200);
      font-size: var(--font-base);
      font-weight: var(--weight-medium);
      transition: var(--transition);
      overflow: hidden;
      text-overflow: ellipsis;

      &.hover {
        animation: fadeEnter 1s ease;
      }

      &:not(.hover) {
        animation: fadeExit 0.3s forwards;
      }

      @media (max-width: 768px) {
        animation: none !important;
      }
    }

    &.active {
      background-color: var(--primary-50);

      h1 {
        color: var(--primary-500);
        font-weight: var(--weight-semibold);
      }
    }
  }

  .sub-items {
    border-left: 1px solid var(--gray-50);
    display: grid;
    gap: var(--spacing-3);
    width: 100%;
    padding-left: var(--spacing-5);
    margin-left: var(--spacing-7);
    user-select: none;

    .active {
      color: var(--primary-500);
      font-weight: var(--weight-semibold);
    }

    a {
      color: var(--gray-200);
      font-size: var(--font-base);
      font-weight: var(--weight-medium);
      transition: var(--transition);
      text-decoration: none;

      &:focus-visible {
        transition: none;
        outline: 1.5px solid var(--primary-500);
      }

      :visited {
        color: inherit;
      }
    }
  }
}
@keyframes fadeEnter {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
}

@keyframes fadeExit {
  0% {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  70% {
    width: 0;
    max-width: 0;
    overflow: hidden;
  }

  100% {
    opacity: 0;
  }
}
</style>
