<script lang="ts">
  import { t, locales, locale, translations } from '$lib/translations/index.js';
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  import arrow from '../../assets/images/arrow.svg';
  import clickOutside from '../../utils/outsideClick.js';
	import { base } from '$app/paths';
  $: ({ route } = $page.data);
  let open = false;
</script>

<div class={`lang ${open ? 'active' : ''}`} use:clickOutside={() => (open = false)}>
  <div class="langBtn" on:click={() => (open = !open)} on:keydown={() => false} role="button" tabindex="0">
    <img src={$translations[$locale].image} class="flag" alt="flag"/>
    <div class="text">
      { $locale ? $t(`lang.${$locale}`) : 'Language'}
    </div>
    <img src={arrow} class="arrow" alt="arrow" />
  </div>
  <div class="langList">
    {#each $locales as lc}
      <div
        data-value="{base}/{lc}"
        class={lc === $locale ? 'active' : ''}
        on:click={(e) => {
          if (!e.currentTarget.dataset?.value) {
            return;
          }
         
          goto(e.currentTarget.dataset.value);
          open = false;
        }}
        on:keydown={() => false}
        role="button"
        tabindex="0"
      >
        {$t(`lang.${lc}`)}
      </div>
    {/each}
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables'; 
  @import 'src/scss/media'; 
  
  .lang {
    position: relative;
    user-select: none;

    .langBtn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 16px;
      .flag {
        height: 24px !important;
        width: 24px !important;
        min-width: 24px !important;
      }

      .text {
        @include breakpoint-down('deskS') {
          display: none;
        } 
        @include breakpoint-down('tabM') {
          display: block;
        }
      }
   
      cursor: pointer;
      line-height: 24px;
      font-weight: 500;
      letter-spacing: 0.08px;
      height: 44px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

      > img {
        width: 20px;
        height: 20px;
        transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      }

      &:hover {
  
      }

      &:active {
        background: transparent;
      }
    }

    .langList {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      opacity: 0;
      pointer-events: none;
      border-radius: 16px;
      background: $blue500;
      padding: 8px;

      @include breakpoint-down('deskS') {
        width: fit-content;
      }
      @include breakpoint-down('tabM') {
        top: auto;
        bottom: calc(100% + 8px);
      }

      > div {
        cursor: pointer;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 21px;
        font-weight: 400;
        border-radius: 10px;
        transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

        &:hover {
          background: $blue400;
        }

        &:active {
          background: $blue600;
        }

        &.active {
          color: $orange500;
        }
      }
    }

    &.active {
      .langBtn {
        // background: #f0ede8;
        // border: 1px solid #f0ede8;
        
      }

      .langList {
        opacity: 1;
        pointer-events: all;
      }

      .langBtn {
        .arrow {
          transform: rotate(-180deg);
        }
      }
    }
  }
</style>