<template>
  <Container>
    <div class="service-packages-desktop">
      <Bubbles />
      <div class="main">
        <h2 class="title">Service Packages</h2>
        <img
          v-lazy="arrowIcon"
          width="15"
          height="15"
          class="arrow"
          :style="arrowStyle" />
        <ol ref="list" class="packages">
          <li
            v-for="({ name }, index) in items"
            :key="index"
            class="package-name"
            :class="{ active: index === activeItemIndex }"
            @click="activeItemIndex = index">
            {{ name }}
          </li>
        </ol>
        <VButton
          class="button"
          justify="space-between"
          size="extra-big"
          icon-right="button-arrow"
          :to="buttonLink">
          See more
        </VButton>
      </div>
      <div
        v-for="(item, index) in items"
        v-show="index === activeItemIndex"
        :key="index"
        class="info-content">
        <Info :key="activeItemIndex" :package="item" />
      </div>
    </div>
  </Container>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IServicePackages } from '@/components/sections/ServicePackages/ServicePackages.types';
import Bubbles from '@/components/sections/ServicePackages/ServicePackagesDesktop/Bubbles.vue';
import VButton from '@/components/ui/common/VButton.vue';
import Info from '@/components/sections/ServicePackages/Info/Info.vue';
import Container from '@/components/ui/Container.vue';
import arrowIcon from '@/assets/img/static-icons/arrow/arrow-right-bold-orange.svg?url';

export default defineComponent({
  components: { Container, Bubbles, VButton, Info },

  props: {
    items: {
      type: Array as PropType<IServicePackages.Item[]>,
      required: true,
    },
    buttonLink: {
      type: String,
      default: '/pricing',
    },
  },

  data: () => ({
    activeItemIndex: 0,
    listItemHeight: 0,
    arrowIcon,
  }),

  computed: {
    arrowStyle() {
      const rowGap = 32;
      const translatePerItem = this.listItemHeight + rowGap;
      const translateValue = this.activeItemIndex * translatePerItem;

      return {
        transform: `translateY(${translateValue}px)`,
      };
    },
  },

  mounted() {
    const observer = new ResizeObserver(this.getListItemHeight);
    const list = this.$refs.list as HTMLElement;
    if (list && list.firstElementChild) {
      observer.observe(list.firstElementChild);
    }
  },
  methods: {
    getListItemHeight() {
      const list = this.$refs.list as HTMLElement;

      if (!list || !list.firstElementChild) {
        return;
      }

      this.listItemHeight = list.firstElementChild?.clientHeight || 0;
    },
  },
});
</script>

<style lang="scss" scoped>
.service-packages-desktop {
  position: relative;

  display: flex;
  justify-content: space-between;

  padding: 80px 80px 80px 112px;
  overflow: hidden;

  background: #242628;
  border-radius: 32px;
}

.main {
  min-width: 482px;
}

.title {
  max-width: 360px;

  color: #ffffff;
  font-weight: bold;
  font-size: 60px;
  line-height: 120%;
  text-transform: uppercase;
}

.arrow {
  position: relative;
  top: 65px;
  left: 44px;

  color: #ff5f21;

  transition: all 0.3s;
}

.packages {
  width: min-content;
  margin: 36px 0 58px 88px;

  counter-reset: li;
}

.package-name {
  display: flex;
  align-items: baseline;
  min-width: 345px;
  margin-bottom: 32px;

  color: #646668;
  font-weight: 600;
  font-size: 26px;
  line-height: 132%;

  cursor: pointer;

  transition: color 0.4s;

  &:before {
    margin-right: 28px;

    color: #3c3d3e;
    font-weight: 600;
    font-size: 18px;
    line-height: 132%;

    content: counter(li, decimal-leading-zero);
    counter-increment: li;
    font-variant-numeric: tabular-nums;
  }

  &.active {
    color: #ff5f21;

    &:before {
      color: #ff5f21;
    }
  }
}

.button {
  width: 100%;
  max-width: 260px;
  margin-left: 88px;
}

.info-content {
  overflow: hidden;

  animation: openContent 0.5s ease-in-out;
}

@keyframes openContent {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
