<template>
  <aside class="sidebar-steps">
    <div class="sidebar-steps__mobile-logo">
      <img :src="logoPinkishRed" alt="مدرسه بانو" />
    </div>
    <div class="sidebar-steps__panel">
      <div class="sidebar-steps__logo">
        <img :src="logoWhite" alt="مدرسه بانو" />
      </div>
      <ul ref="stepsList" class="sidebar-steps__list scrollbar-thin">
        <li v-for="tab in tabs" :key="tab.step" class="sidebar-steps__item">
          <button
            type="button"
            class="sidebar-steps__button"
            :class="{
              'sidebar-steps__button--active': activeStep === tab.step,
              'sidebar-steps__button--completed': tab.completed,
            }"
            :disabled="tab.disabled"
            :aria-label="`${tab.title}، مرحله ${tab.step}`"
            :aria-current="activeStep === tab.step ? 'step' : undefined"
            @click="emit('select-step', tab.step)"
          >
            <span class="sidebar-steps__icon">
              <SvgIcon :name="tab.completed ? 'check-square' : tab.icon" :size="20" color="#fff" />
            </span>
            <span class="sidebar-steps__label">{{ tab.title }}</span>
            <span class="sidebar-steps__number">{{ tab.step }}</span>
          </button>
        </li>
      </ul>
      <div class="sidebar-steps__logout">
        <SidebarLogout color="#fff" />
      </div>
    </div>
  </aside>
</template>

<script setup>
import { gallery } from '@/utils/gallery'
import { nextTick, ref, watch } from 'vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import SidebarLogout from '@/layouts/sidebars/SidebarLogout.vue'

const props = defineProps({
  tabs: { type: Array, required: true },
  activeStep: { type: Number, default: 1 },
})

const emit = defineEmits(['select-step'])
const stepsList = ref(null)

const scrollActiveStepIntoView = async () => {
  await nextTick()
  stepsList.value
    ?.querySelector('[aria-current="step"]')
    ?.scrollIntoView({ block: 'nearest', inline: 'center' })
}

watch(() => props.activeStep, scrollActiveStepIntoView, { immediate: true })

const logoWhite = gallery.logoWhite
const logoPinkishRed = gallery.logoPinkishRed
</script>

<style lang="scss" scoped>
.sidebar-steps {
  height: 100%;

  &__mobile-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;

    img {
      height: 2.5rem;
      object-fit: contain;
    }

    @media (min-width: 1024px) {
      display: none;
    }
  }

  &__panel {
    background: var(--color-primary);
    border-radius: 1rem;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;

    @media (min-width: 1024px) {
      height: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
      padding: 1.25rem 0.875rem;
      border-radius: 1.5rem;
    }
  }

  &__logo {
    display: none;

    @media (min-width: 1024px) {
      display: flex;
      justify-content: center;
      padding-top: 0.5rem;
    }

    img {
      height: 3.5rem;
      object-fit: contain;
    }
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;

    @media (min-width: 1024px) {
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.25rem;
      padding-top: 0.5rem;
      overflow: hidden auto;
    }
  }

  &__item {
    flex: 0 0 auto;
    min-width: 0;

    @media (min-width: 1024px) {
      width: 100%;
    }
  }

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.375rem;
    border: 1px solid transparent;
    border-radius: 0.875rem;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0.62;
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

    @media (min-width: 1024px) {
      justify-content: flex-start;
      width: 100%;
      padding: 0.5rem 0.625rem;
    }

    &:hover:not(:disabled),
    &--active {
      opacity: 1;
      background: rgba(255, 255, 255, 14%);
      border-color: rgba(255, 255, 255, 22%);
    }

    &--completed {
      &:not(.sidebar-steps__button--active) {
        opacity: 0.85;
      }
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.32;
    }
  }

  &__icon {
    display: inline-flex;
    flex-shrink: 0;
  }

  &__label {
    display: none;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;

    @media (min-width: 1024px) {
      display: block;
    }
  }

  &__number {
    display: none;
    margin-inline-start: auto;
    font-family: var(--font-family-number-fa);
    font-size: 0.75rem;
    opacity: 0.75;

    @media (min-width: 1024px) {
      display: inline;
    }
  }

  &__logout {
    flex: 0 0 auto;

    :deep(.sidebar-logout) {
      padding: 0.25rem;
    }

    :deep(.sidebar-logout__labels) {
      display: none;
    }

    @media (min-width: 1024px) {
      border-top: 1px solid rgba(255, 255, 255, 20%);
      padding-top: 0.5rem;

      :deep(.sidebar-logout) {
        justify-content: flex-start;
        width: 100%;
        padding: 0.5rem 0.625rem;
      }

      :deep(.sidebar-logout__labels) {
        display: flex;
      }
    }
  }
}
</style>
