<script lang="ts">
  import { menuMobile, isNewHeader } from '../../store';
  import { onMount } from 'svelte';
  import { localeLink, t } from '$lib/translations';
  import HeaderTop from "$components/header/HeaderTop.svelte";
  import HeaderBanner from '$components/header/HeaderBanner.svelte';

  export let className = '';
  let prevClassName = className;
  let linkText = '';
  let visible = '';

  let scrollY = 0;

  let openMenu = false;
  let type = 0;
  let dropOpen = false;
  let activeItem = 0;

  isNewHeader.set(true);

  const setType = (id: number, dropOpenVal = true) => {
    type = id;
    dropOpen = dropOpenVal;
    activeItem = 0;
  };

  const setActiveItem = (id: number) => {
    activeItem = id;
  };

  const setDropOpen = (active: boolean) => {
    dropOpen = active;
    type = 0;
    activeItem = 0;
  };

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

  let lastKnownScrollPosition = 0;
  let deltaY = 0;
  const minHideHeight = 100;

  onMount(() => {
    scrollY = window.scrollY < 0 ? 0 : window.scrollY;

    className = (window.scrollY < 0 ? 0 : window.scrollY) > 0 ? '' : prevClassName;

    window.addEventListener('scroll', function () {
      scrollY = window.scrollY < 0 ? 0 : window.scrollY;

      className = (window.scrollY < 0 ? 0 : window.scrollY) > 0 ? '' : prevClassName;

      let ticking = false;

      if (!ticking) {
        window.requestAnimationFrame(function () {
          deltaY = (window.scrollY < 0 ? 0 : window.scrollY) - lastKnownScrollPosition;

          lastKnownScrollPosition = window.scrollY < 0 ? 0 : window.scrollY;

          ticking = false;
        });
        ticking = true;
      }

      if (deltaY > 0 && (window.scrollY < 0 ? 0 : window.scrollY) > minHideHeight) {
        visible = 'hide';
        setDropOpen(false);
      } else if (deltaY && (window.scrollY < 0 ? 0 : window.scrollY) >= window.screen.height) {
        visible = 'hideMenu';
      } else {
        visible = '';
      }
    });
  });
</script>

<header
  class="header {className} {scrollY > 0 ? 'active' : ''} {dropOpen ? 'drop' : ''} {visible}"
  on:mouseleave={() => setDropOpen(false)}
  role="presentation"
>
  <HeaderBanner />
  <HeaderTop />
  <div class="container container-wide">
    <div class="header__list">
      <div class="header__item">
        <div class="logo header__logo">
          <a aria-label="link to home page" href="/{localeLink()}">{linkText}</a>
        </div>
      </div>
      <div class="header__item header__menu">
        <div class="nav" role="menu">
          <a
            href="/blog"
            class="nav_drop"
            role="menuitem"
            tabindex="0"
          >
            <div class="nav_drop__title">
              {$t('Articles')}
            </div>
          </a>
          <a
            href="/glossary"
            class="nav_drop"
            role="menuitem"
            tabindex="0"
          >
            <div class="nav_drop__title">
              {$t('Glossary')}
            </div>
          </a>
          <div
            class="nav_drop {className}"
            role="menuitem"
            tabindex="0"
          >
            <div class="nav_drop__container">
              <div class="nav_drop__title">
                {$t('Resources')}
                <div class="nav_dropArrow">
                  <div class="nav_dropArrowItem nav_dropArrowItemUp" />
                  <div class="nav_dropArrowItem nav_dropArrowItemDown" />
                </div>
              </div>
              <div class="nav_drop__submenu">
                <a href={`${localeLink()}/marketing-guide`} role="menuitem" tabindex="0">{$t('Marketing Guide')}</a>
                <a href={`${localeLink()}/video-tutorials`} role="menuitem" tabindex="0">{$t('Video Tutorials')}</a>
                <a href={`${localeLink()}/brokerage-profit-calculator`} role="menuitem" tabindex="0">{$t('Profit Calculator')}</a>
                <a href={`${localeLink()}/business-plan`} role="menuitem" tabindex="0">{$t('Business Plan')}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        aria-label="button-burger"
        class="btn-burger"
        on:click={() => menuMobile.set(!openMenu)}
        on:keydown={(e) => e.key === 'Enter' && menuMobile.set(!openMenu)}
        role="button"
        tabindex="0"
      >
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="11" y="13" width="18" height="2" fill="#E62334" />
          <rect x="11" y="19" width="18" height="2" fill="#E62334" />
          <rect x="11" y="25" width="18" height="2" fill="#E62334" />
        </svg>
      </div>
    </div>
  </div>
</header>

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

  header {
    background: white;
  }

  .container-wide {
    max-width: 1328px;

    .logo {
      width: 197px;
      height: 35px;
    }

    @include breakpoint-down('deskS') {
      max-width: 100%;
      padding: 0 32px;
    }

    @include breakpoint-down('tabM') {
      padding: 0 20px;
    }
  }

  .header {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;

    @include breakpoint-down('tabM') {
      background: black;
    }

    &__list {
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      gap: 30px;

      @include breakpoint-down('deskS') {
        height: 60px;
        gap: 50px;
      }

      @include breakpoint-down('deskM') {
        gap: 20px;
        padding-top: 3px;
      }
    }
    &__list {
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      gap: 30px;

      @include breakpoint-down('deskS') {
        height: 60px;
        gap: 50px;
      }

      @include breakpoint-down('tabM') {
        height: 56px;
        padding-top: 0;
      }

      @include breakpoint-down('deskM') {
        gap: 20px;
      }
    }

    &__logo {
      background-image: url('../../assets/header/logo_blk_Header.svg');

      @include breakpoint-down('tabM') {
        background-image: url('../../assets/header/logo_wht_Header.svg');
      }
    }

    &__item {
      display: flex;

      &.header__menu {
        @include breakpoint-down('tabM') {
          display: none;
        }
      }

      &_lang {
        align-items: center;

        @include breakpoint-down('deskS') {
          margin-right: 88px;
        }

        @include breakpoint-down('tabM') {
          margin-right: 90px;
          display: none;
        }
      }
    }

    &__button {
      @include smallCTA;

      padding: 12px 24px;
      border-radius: 40px;
      background: $fontPrimary;
      color: $techWhite;
      cursor: pointer;

      @include breakpoint-down('deskL') {
        padding: 8px 20px;
      }

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

    &__drop {
      z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      padding-top: calc(155px + 110px);
      padding-bottom: 30px;
      background: $techWhite;
      opacity: 0;
      pointer-events: none;

      @include breakpoint-down('deskL') {
        padding-top: calc(136px + 85px);
      }

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

    &.ghostWhite {
      .header {
        &__logo {
          background-image: url('../../assets/logo.svg');
        }
        &__webinars {
          background: rgba(255,255,255,.7);

        }
      }
    }

    &.hide {
      transform: translateY(calc(-100% - 1px));
      pointer-events: none;

      @include breakpoint-down('tabM') {
        transform: translateY(calc(-100% - 1px)) !important;
      }
    }

    &.hideMenu {
      transform: translateY(-74px);

      @include breakpoint-down('tabM'){
        transform: translateY(0);
      }
    }
  }

  :global(body.banner) {
    .header {
      &.hideMenu {
        transform: translateY(-135px);

        @include breakpoint-down('tabM') {
          transform: translateY(0);
        }
      }
    }
  }

  :global(.header.active) {
    &:before {
      bottom: 0 !important;
      height: 100% !important;
    }
  }

  :global(.header.drop) {
    @include breakpoint-down('deskM') {
      padding-bottom: 31px;
    }
  }

  :global(.header.drop .headerTabsItem) {
    &:first-of-type {
      color: $techGrey30 !important;

      &:hover {
        color: $fontPrimary !important;
      }
    }

    &:last-of-type {
      color: $fontPrimary !important;
    }
  }

  :global(.header.active .headerTabsItem) {
    &:first-of-type {
      color: $techGrey30 !important;

      &:hover {
        color: $fontPrimary !important;
      }
    }

    &:last-of-type {
      color: $fontPrimary !important;
    }
  }

  .btn-burger {
    display: none;

    @include breakpoint-down('tabM') {
      display: flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0;
    }
  }

  .nav {
    display: flex;
    align-items: center;
    max-height: 33px;
    gap: 20px;
    margin-right: 65px;

    &_drop {
      transition: all  0.2s ease;
      height: 18px;
      z-index: 2;
      padding: 0 10px;

      & .nav_drop__container {
        transition: all .2s ease;
      }

      & .nav_drop__title {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
        display: flex;
        align-items: center;
        cursor: pointer;
        //transition: .2s ease;

        border-radius: 12px;
      }

      & .nav_drop__submenu {
        transition: 0.2s ease;
        gap: 12px;
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform-origin: top;
        transform: scaleY(0);

        a {
          color: black;
          font-size: 12px;
          line-height: 18px;
          letter-spacing: 0;
          padding: 0;
          height: auto;
        }
      }

      &:global(.ghostWhite) {
        color: $techWhite;
      }

      &:hover {
        & .nav_drop__container {
          background: rgba(255, 255, 255, 0.8);
          border-radius: 12px;
          padding: 12px 32px 20px;
          gap: 12px;
          opacity: 1;
          z-index: 2;
          transform: translate(0, -12px);
          backdrop-filter: blur(20px);
        }

        .nav_dropArrowItemDown {
          transform: translateY(18px);
        }

        .nav_dropArrowItemUp {
          transform: rotate(180deg) translateY(0);
        }

        & .nav_drop__submenu {
          transform: scaleY(1);
        }
      }
    }

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

    &_dropArrowItem {
      width: 24px;
      height: 20px;
      transition: 0.2s ease;
    }

    &_dropArrowItemDown {
      background-image: url("../../assets/icons/arrow-black.svg");
      background-position: center center;
      background-repeat: no-repeat;
      transition: 0.2s ease;
    }

    &_dropArrowItemUp {
      background-image: url("../../assets/icons/arrow-black.svg");
      transform: rotate(180deg) translateY(-18px);;
      background-position: center center;
      background-repeat: no-repeat;
      transition: 0.2s ease;
      position: absolute;
    }
  }

  .listOne,
  .listThree {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;

    @include breakpoint-down('deskL') {
      gap: 32px;
      align-items: flex-start;
    }

    &__list {
      display: flex;
      gap: 40px;

      @include breakpoint-down('deskL') {
        gap: 32px;
      }
    }

    &__listItem {
      max-width: 200px;
      min-width: 200px;
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: 0.3s ease-in-out;

      @include breakpoint-down('deskL') {
        max-width: 160px;
        min-width: 160px;
      }

      &:global(.active) {
        opacity: 0.3;
      }
    }

    &__listItemLink {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    &__listItemIcon {
      width: 70px;
      height: 70px;

      @include breakpoint-down('deskL') {
        width: 58px;
        height: 58px;
      }
    }

    &__listItemText {
      @include baseSubMenu;
      text-align: center
    }

    &__content {
      @include xSmallDefault;

      width: 100%;
      max-width: 486px;
      padding: 17px 24px;

      @include breakpoint-down('deskL') {
        padding: 20px 24px;
      }
    }
  }

  .listTwo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;

    @include breakpoint-down('deskL') {
      gap: 80px;
    }

    &__list {
      display: flex;
      gap: 40px;

      @include breakpoint-down('deskL') {
        gap: 80px;
      }
    }

    &__listItem {
      max-width: 200px;
      min-width: 200px;
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: 0.3s ease-in-out;

      @include breakpoint-down('deskL') {
        max-width: 160px;
        min-width: 160px;
      }

      &:global(.active) {
        opacity: 0.3;
      }
    }

    &__listItemLink {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    &__listItemImage {
      width: 200px;
      height: 95px;
      margin-bottom: 8px;

      @include breakpoint-down('deskL') {
        width: 160px;
        height: 76px;
      }
    }

    &__listItemText {
      @include baseSubMenu;
      text-align: center;
    }

    &__content {
      @include xSmallDefault;

      width: 100%;
      max-width: 240px;

      //> span {
      //	display: block;
      //	color: $redPrimary;
      //}
    }
  }

  .listFour {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    @include breakpoint-down('deskL') {
      padding-top: 19px;
    }

    &__content {
      display: flex;
      align-items: center;
      gap: 40px;

      @include breakpoint-down('deskL') {
        gap: 32px;
      }
    }

    &__contentImage {
      background: $techBlue2;
      border-radius: 16px;
      width: 320px;
      height: 163px;
      object-fit: cover;
      object-position: center;

      @include breakpoint-down('deskL') {
        width: 256px;
        height: 151px;
      }
    }

    &__contentText {
      @include xSmallDefault;

      max-width: 199px;
      min-width: 199px;
      width: 100%;

      @include breakpoint-down('deskL') {
        max-width: 192px;
        min-width: 192px;
      }
    }

    &__list {
      width: 100%;
      min-width: 268px;
      max-width: 268px;

      display: flex;
      flex-direction: column;
      gap: 21px;
      position: relative;

      padding-left: 68px;
      margin-left: 63px;
      margin-right: 28px;

      @include breakpoint-down('deskL') {
        margin-left: 39px;
        padding-left: 52px;
        min-width: 190px;
        max-width: 190px;
        margin-right: 0;
      }

      &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: $techBlue2;
      }
    }

    &__listLink {
      @include baseSubMenu;

      width: max-content;
      transition: 0.3s ease-in-out;

      &:global(.active) {
        opacity: 0.3;
      }
    }
  }

  .listOne,
  .listTwo,
  .listThree,
  .listFour {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s 0.1s;
    &:global(.active) {
      height: auto;
      overflow: initial;
      opacity: 1;
    }
  }
</style>