<script lang="ts">
  import { isTable, menuMobile } from '../../store';
  import { browser } from '$app/environment';
  import scrollLock from '../../utils/scrollLock';
  import Social from '../footer/Social.svelte';
  import Lang from '../header/Lang.svelte';

  const contents = [
    {
      title: 'Solutions',
      links: [
        {
          title: 'Turnkey Solution',
          link: '/turnkey-solution',
        },
        {
          title: 'Forex / CFD',
          link: '/white-label-broker',
        },
        {
          title: 'Plans & Pricing',
          link: '/under-construction',
          click: true,
        },
      ],
    },
    {
      title: 'Modules',
      links: [
        {
          title: 'Trading Platform',
          link: '/trading-platform',
        },
        {
          title: 'Back Office',
          link: '/back-office',
        },
      ],
    },
    {
      title: 'Resources',
      links: [
        {
          title: 'Marketing Guide',
          link: '/marketing-guide',
        },
        {
          title: 'Blog',
          link: '/blog',
        },
        {
          title: 'Video Tutorials',
          link: '/video-tutorials',
        },
      ],
    },
    {
      title: 'More',
      links: [
        {
          title: 'About Us',
          link: '/about',
        },
        {
          title: 'Team',
          link: '/team',
        },
        {
          title: 'Technologies',
          link: '/under-construction',
          click: true,
        },
        {
          title: 'Events',
          link: '/under-construction',
          click: true,
        },
      ],
    },
  ];

  let openMenu = false;
  let path = '';

  menuMobile.subscribe((value) => {
    openMenu = value;
    scrollLock(value);

    if (browser) {
      path = window.location.pathname;
    }
  });

  let active = 0;
  let height = 0;
  let table = false;

  isTable.subscribe((value) => {
    table = value;
  });

  const open = (id: number, event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) => {
    if (!table) {
      return;
    }

    if (active === id) {
      active = 0;
    } else {
      active = id;

      setTimeout(
        function () {
          height = this.target.nextElementSibling.scrollHeight;
        }.bind(event),
        100
      );
    }
  };
</script>

<div class="menu-mobile {openMenu ? 'open' : ''}">
  <Lang className="menu-mobile__lang" />
  <div
    class="menu-mobile__close"
    on:click={() => menuMobile.set(false)}
    on:keydown={() => menuMobile.set(false)}
    role="button"
    tabindex="0"
    aria-label="button-close-menu-mobile"
  >
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect y="9" width="12.7279" height="1.41421" transform="rotate(-45 0 9)" fill="white" />
      <rect x="9" y="10" width="12.7279" height="1.41421" transform="rotate(-135 9 10)" fill="white" />
    </svg>
  </div>
  <div class="menu-mobile__content">
    <div class="menu-mobile__inner">
      {#each contents as content, index}
        <div class="menu-mobile__list {active === index + 1 ? 'open' : ''}">
          <div
            class="menu-mobile__listHeader"
            on:click={(e) => open(index + 1, e)}
            on:keydown={() => undefined}
            role="button"
            tabindex="0"
          >
            {content.title}
          </div>
          <div
            class="menu-mobile__listBody"
            style="height: {active === index + 1 ? `${height}px` : !table ? 'initial' : '0px'};"
          >
            {#each content.links as link}
              <a
                href={link.link}
                class="menu-mobile__listLink {path === link.link ? 'active' : ''}"
                on:click={(e) => {
                  if (link.click) {
                    e.preventDefault();
                  } else {
                    menuMobile.set(false);
                  }
                }}
              >
                {link.title}
              </a>
            {/each}
          </div>
        </div>
      {/each}
    </div>
    <Social />
    <div class="menu-mobile__tabs">
      <a href="https://group.quadcode.com" class="menu-mobile__tabsItem">Quadcode Group</a>
      <a href="https://quadcode.com" class="menu-mobile__tabsItem active">Quadcode Brokerage Solutions</a>
    </div>
  </div>
</div>

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

  .menu-mobile__tabs {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(242, 246, 249, 0.8);
    backdrop-filter: blur(7px);
    display: flex;
  }

  .menu-mobile__tabsItem {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    width: calc(100% / 2);
    position: relative;
    display: block;
    text-align: center;
    padding: 15px 20px 38px 20px;

    &:first-of-type {
      transition: 0.4s ease-in-out;
      color: $techGrey;
      border-right: 2px solid $techWhite;

      &:hover {
        color: $fontPrimary;
      }
    }

    &.active {
      background: $techWhite;

      &:after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        background: $redPrimary;
      }
    }
  }

  .menu-mobile {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background: $techBlue2;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: 0.4s ease;
    display: none;

    @include breakpoint-down('deskS') {
      display: block;
    }

    &__content {
      width: 100%;
      height: 100%;
      padding-bottom: 140px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;

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

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

    &__inner {
      width: 100%;
      padding-top: 121px;
      padding-bottom: 32px;
      //flex: 1;
    }

    :global(.menu-mobile__lang) {
      position: absolute !important;
      left: 37px;
      top: 0;
      //opacity: 1 !important;
      //visibility: visible !important;
      //pointer-events: all !important;
    }

    &__close {
      position: absolute;
      right: 21px;
      top: 10px;
      z-index: 1;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $redPrimary;
    }

    &__list {
      border-bottom: 1px solid $techBlue2;

      &:global(.open) {
        .menu-mobile__listBody {
          opacity: 1;
        }

        .menu-mobile__listHeader {
          background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 23L20 17L14 23' stroke='%23E62334' stroke-width='3'/%3E%3C/svg%3E%0A");
        }
      }
    }

    &__listHeader {
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
      text-align: right;

      transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
      padding: 21px 85px 21px 40px;
      background-color: $techWhite;
      background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 17L20 23L26 17' stroke='%23F5333F' stroke-width='3'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-size: 40px 40px;
      background-position-y: center;
      background-position-x: calc(100% - 21px);
    }

    &__listBody {
      overflow: hidden;
      opacity: 0;
      height: 0;
      transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    }

    &__listLink {
      transition: 0.4s ease;
      font-size: 17px;
      font-weight: 500;
      line-height: 24px;

      display: flex;
      justify-content: flex-end;
      width: 100%;
      padding: 20px 85px 20px 21px;
      border-bottom: 2px solid $techWhite;
      background: $techBlue1;

      &:global(.active) {
        background: $techBlue2;

        transition: 0.4s ease;
      }
    }

    &:global(.open) {
      pointer-events: all;
      opacity: 1;
      transition: 0.4s ease;
    }

    & :global(.social) {
      margin-inline: auto;
    }
  }
</style>