<script lang="ts">
  import Lang from './Lang.svelte';
  import logo from '../../assets/images/logo.svg';
  import close from '../../assets/images/close.svg';
  import { page } from '$app/stores';
  import { cookieVisible, menu, showForm } from '../../store.js';
	import CookieMessage from '../CookieMessage/CookieMessage.svelte';
	import { t } from '$lib/translations';

  $: ({ route } = $page.data);

  let menuOpen = false;

  menu.subscribe((value) => {
    menuOpen = value;
  });

  const onClickGet = () => {
    const url = new URL("https://my.affstore.com/auth/signup");
    const urlParams = new URLSearchParams(url.search);
    for (let i = 0; i < localStorage.length; i++) {
      let key = localStorage.key(i);

      if (key && key.includes('param__')) {
        urlParams.append(key.replace('param__', ''), localStorage.getItem(key) || '');
      }
    }
    window.location.href = `https://my.affstore.com/auth/signup${urlParams.toString() ? '?'+urlParams.toString() : ''}`;
  };

  let onClick = () => {
    menu.set(!menuOpen);
  };

  let visible = false;

  cookieVisible.subscribe((value) => {
    visible = value;
  });
</script>

<div class="menuMobile {menuOpen ? 'active' : ''} {!visible ? 'cookie' : ''}">
  <div class="menuMobileHeader">
    <div class="logo"><img src={logo} alt="logo"></div>
    <div class="headerBurger"
      on:click={onClick}
      on:keydown={() => false}
      tabindex="0"
      role="button"
      aria-label="Burger"
    >
      <img src={close} alt="close" width="24" height="24" />
    </div> 
  </div>
  <div class="menuMobileContent">
    <div class="menuMobileWrapper">
      <div class="menuMobileItem">
        <a href="#advantages" on:click={onClick} class="menuMobileItemLink">{$t('Advantages')}</a>
        <a href="#payments" on:click={onClick} class="menuMobileItemLink">{$t('Payments')}</a>
        <a href="#offers" on:click={onClick} class="menuMobileItemLink">{$t('Offers')}</a>
        <a href="#reviews" on:click={onClick} class="menuMobileItemLink">{$t('Reviews')}</a>
      </div>
    </div>
  </div>
  <div class="menuMobileFooter">
    <div class="dropdown">
      <Lang />
    </div>
    <div 
      class="menuMobileItemLink" 
      role="button"
      tabindex="0"
      aria-label="Burger" 
      on:click={onClickGet}
      on:keydown={() => false}
      > 
      {$t('Log in')}
    </div>  
  </div>
  <CookieMessage className='static' />
</div>

<style lang="scss">
  @import '../../scss/media';
  @import '../../scss/variables';
  .menuMobile {
    pointer-events: none;
    opacity: 0;
    background: $blue800;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
    z-index: 50;
    padding: 0px 30px;
    display: flex;
    flex-direction: column;
    
    @include breakpoint-down('tabS') {
      padding: 0px 26px;
    }

    @include breakpoint-down('mobM') {
      padding: 0px 16px;
    }

    .menuMobileHeader {
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        height: 32px;

        @include breakpoint-down('mobM') {
          height: 20px;
          img {
            height: 20px;
          }
        }
      }
      .headerBurger {
        display: none;
        border-color: none;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: $blue500;
        order: 4;

        @include breakpoint-down('tabM') {
          display: flex;
          border-radius: 16px;
        }
      }
    }

    .menuMobileContent {
      flex: 1;
      padding-top: 32px;
      overflow: auto;
      padding-bottom: 40px;

      &::-webkit-scrollbar {
        width: 0;
        opacity: 0;
        display: none;
      }
    }

    .menuMobileWrapper {
      display: flex;
      flex-wrap: wrap;
      column-gap: 16px;
      row-gap: 32px;
    }

    .menuMobileItem {
      width: calc((100% - 16px) / 2);

      @include breakpoint-down('mobM') {
        width: 100%;
      }

      &:last-of-type {
        width: 100%;
      }
    }

    .menuMobileItemTitle {
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      color: #73726c;
      padding: 0 12px;
      margin-bottom: 8px;
    }

    .menuMobileItemLink {
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: 0.005em;
      display: block;
      padding: 12px 15px;
      margin-bottom: 8px;
      color: #F5F6FF;
      text-decoration: none;

      @include breakpoint-down('tabS') {
        padding-left: 0;
      }
      @include breakpoint-down('mobM') {
        padding-left: 13px;
      }

      &.active {
        color: #fe4d0d;
      }

      &.not-click {
        pointer-events: none;
        opacity: 0.5;
      }
    }

    .menuMobileFooter {
      border-top: thin solid $blue500;
      padding-top: 8px;
      padding-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .menuMobileFooterText {
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;

      @include breakpoint-down('mobM') {
        max-width: 140px;
      }
    }

    &.cookie {
      // padding-top: 168px;

      .menuMobileContent {
        height: calc(100vh - 168px - 100px);
        overflow: auto;
        padding-bottom: 40px;
      }
    }

    &.active {
      opacity: 1;
      pointer-events: all;
    }
  }
</style>