<script lang="ts">
  import { onMount } from 'svelte';

  export let className = '';

  onMount(() => {
    const lang = document.querySelector('.lang');

    if (lang) {
      const btnLang = lang.querySelector('.lang__btn');
      const listLang = lang.querySelector('.lang__list');

      btnLang.addEventListener('mouseover', () => {
        open();
      });

      btnLang.addEventListener('mouseout', () => {
        close();
      });

      listLang.addEventListener('mouseover', () => {
        open();
      });

      listLang.addEventListener('mouseout', () => {
        close();
      });

      // const isOpen = () => {
      // 	return lang.classList.contains('lang_active');
      // };

      const open = () => {
        lang.classList.add('lang_active');
        setTimeout(() => {
          lang.classList.add('lang_animation');
        }, 600);
      };

      const close = () => {
        lang.classList.remove('lang_active');
      };
    }
  });
</script>

<div class="lang {className}">
  <div class="lang__container">
    <div class="lang__btn">
      <div class="lang__text">Eng</div>
      <div class="lang__icon">
        <div class="lang__arrow lang__arrow-down" />
        <div class="lang__arrow lang__arrow-up" />
      </div>
    </div>
    <div class="lang__list">
      <div class="lang__inner">
        <div class="lang__item"><a href="/under-construction" class="lang__link">Deu</a></div>
        <div class="lang__item"><a href="/under-construction" class="lang__link">Esp</a></div>
        <div class="lang__item"><a href="/under-construction" class="lang__link">Fra</a></div>
        <div class="lang__item"><a href="/under-construction" class="lang__link">Ita</a></div>
        <div class="lang__item"><a href="/under-construction" class="lang__link">Por</a></div>
      </div>
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .lang {
    position: relative;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    &__btn {
      display: flex;
      cursor: pointer;
      padding: 20px 0;
    }

    &__text {
      @include baseCTA;

      color: rgba(20, 20, 20, 1);
      transition: 0.4s ease-in-out;
    }

    &__icon {
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    &__arrow {
      margin: 0 9px;
      width: 10px;
      height: 7px;
      transition: 0.2s ease;

      &-down {
        background-image: url('../../assets/icons/arrow.svg');
      }

      &-up {
        transform: translateY(-18px);
        background-image: url('../../assets/icons/arrow-up.svg');
        position: absolute;
        transition: 0.2s ease;
      }
    }

    &__list {
      left: -15px;
      top: 60px;
      position: absolute;
      width: calc(100% + 7px);
      background: $techWhite;
      border-radius: 6px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      transition: 0.4s ease;
      max-height: 0;
      overflow: hidden;
    }

    &__inner {
      padding: 15px;
    }

    &__item {
      margin-bottom: 8px;
      cursor: pointer;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    &:global(.lang_active) {
      .lang {
        &__list {
          transition: 0.4s ease;
          max-height: 250px;
        }

        &__arrow {
          transition: 0.2s ease;
          &-down {
            transform: translateY(18px);
          }
          &-up {
            transform: translateY(0px);
          }
        }
      }
    }

    &:global(.lang_animation) {
      .lang {
        &__link {
          color: $fontGraphite;
          transition: 0.4s ease;

          &:hover {
            color: $fontPrimary;
            transition: 0.4s ease;
          }
        }
      }
    }

    &.ghostWhite {
      .lang {
        &__text {
          color: $fontWhite;
        }
      }
    }
  }
</style>