<script lang="ts">
  import Social from './Social.svelte';
  import { browser } from '$app/environment';
  import FooterTabs from './FooterTabs.svelte';
  import { isMobile } from '../../store';

  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: '/events',
        },
      ],
    },
  ];

  let active = 0;
  let height = 0;
  let path = '';
  let mobile = false;

  isMobile.subscribe((value) => {
    mobile = value;
  });

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

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

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

      setTimeout(
        function () {
          height = this.target.nextElementSibling.scrollHeight;
        }.bind(event),
        10
      );
    }
  };

  const date = new Date();
</script>

<footer class="footer">
  <FooterTabs />
  <div class="container">
    <div class="footer__row footer__row_first">
      {#each contents as content, index}
        <div class="footer__block {active === index + 1 ? 'open' : ''}">
          <div
            class="footer__block-header"
            on:click={(e) => open(index + 1, e)}
            on:keydown={() => undefined}
            role="button"
            tabindex="0"
          >
            {content.title}
          </div>
          <div
            class="footer__block-body"
            style="height: {active === index + 1 ? `${height}px` : !mobile ? 'initial' : '0px'};"
          >
            {#each content.links as link}
              <div class="footer__block-item">
                <a
                  href={link.link}
                  on:click={(e) => {
                    if (link.click) {
                      e.preventDefault();
                    }
                  }}
                  class="footer__block-link {path === link.link ? 'active' : ''}">{link.title}</a
                >
              </div>
            {/each}
          </div>
        </div>
      {/each}
      <Social />
    </div>
    <div class="footer__row footer__row_middle">
      <div class="footer__text">
        <p>
          All of the information on this website is protected by copyright and is legally owned by Quadcode as its
          intellectual property (hereinafter - Intellectual Property). You may not copy, link, publish, upload to
          external resources, transmit, distribute or reproduce by any means or in any form any portion of this website,
          including any text, images, audio and video materials or any other Intellectual Property without prior written
          consent of Quadcode.
        </p>
        <p>
          Certain names, logos and signs featured on this website are registered trademarks. Quadcode logo is a
          registered trademark in the European Union, Russian Federation, Hong Kong and many other countries. The fact
          that Quadcode has not included any product, feature, service name or logo to the list of its Intellectual
          Property does not waive any intellectual property rights that Quadcode or its affiliates, partners and (or)
          licensees have established in any such product, feature, service name or logo, all of which intellectual
          property rights are expressly reserved. Quadcode trademarks, service marks, trade names, corporate identity
          are important company's corporate assets and Quadcode requires that they be used properly. In order to
          preserve its reputation and protect its trademarks and other Intellectual Property, Quadcode diligently guards
          such objects against any violation.
        </p>
      </div>
    </div>
    <div class="footer__row footer__row_last">
      <div class="footer__items">
        <div class="footer__item">
          <a href="/cookie-policy" class="footer__link">Cookies policy</a>
        </div>
        <div class="footer__item">
          <a href="/privacy-policy" class="footer__link">Privacy policy</a>
        </div>
        <div class="footer__item">
          <a href="/terms-and-conditions" class="footer__link">Terms & Conditions</a>
        </div>
        <div class="footer__item">
          <a href="/vulnerability-disclosure-policy" class="footer__link">Vulnerability disclosure policy</a>
        </div>
      </div>
      <div class="footer__copyright">© Copyright Quadcode {date.getFullYear()}</div>
    </div>
  </div>
</footer>

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

  .footer {
    background: $techWhite;
    padding: 0 0 26px 0;

    @include breakpoint-down('tabM') {
      box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
      padding-bottom: 31px;
    }

    :global(.footerTabs) {
      margin-bottom: 37px;

      @include breakpoint-down('deskL') {
        margin-bottom: 68px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 79px;
      }

      @include breakpoint-down('tabM') {
        margin-bottom: 40px;
      }
    }

    .container {
      position: relative;

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

      @include breakpoint-down('deskM') {
        max-width: 1120px;
      }
    }

    &__row {
      &_first {
        display: flex;
        margin-bottom: 40px;

        @include breakpoint-down('deskL') {
          margin-bottom: 35px;
        }

        @include breakpoint-down('deskS') {
          flex-wrap: wrap;
        }

        @include breakpoint-down('tabM') {
          flex-direction: column;
          margin-bottom: 24px;
          margin-left: -20px;
          width: calc(100% + 40px);
        }

        & :global(.social) {
          flex: 1;
          justify-content: flex-end;
          display: flex;
          align-items: flex-start;

          @include breakpoint-down('deskS') {
            order: 1;
            width: 100%;
            justify-content: center;
            flex: none;
            margin-top: 32px;
          }

          @include breakpoint-down('tabM') {
            justify-content: center;
            order: 1;
            margin-bottom: 0;
            margin-top: 40px;
          }
        }
      }

      &_middle {
        display: flex;
        margin-bottom: 24px;
        width: 100%;

        @include breakpoint-down('deskS') {
          margin-bottom: 24px;
        }
      }

      &_last {
        display: flex;
        align-items: center;
        justify-content: space-between;

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

    &__items {
      display: flex;
      align-items: center;

      @include breakpoint-down('deskS') {
        margin-bottom: 24px;
        width: 100%;
        max-width: 532px;
        margin-inline: auto;
        justify-content: space-between;
      }

      @include breakpoint-down('tabM') {
        flex-direction: column;
      }
    }

    &__item {
      display: flex;
      margin-right: 80px;

      @include breakpoint-down('deskM') {
        margin-right: 64px;
      }

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

      @include breakpoint-down('tabM') {
        margin-bottom: 16px;
      }

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

    &__link {
      @include footerLink;
    }

    &__block {
      margin-right: 81px;

      @include breakpoint-down('deskL') {
        margin-right: 65px;
      }

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

      @include breakpoint-down('tabM') {
        padding-top: 0;
        margin-right: 0;
        min-width: 0;
        border-top: 2px solid $techBlue2;
      }

      &:first-of-type {
        @include breakpoint-down('tabM') {
          border-top: none;
        }
      }

      &-header {
        @include footerTitle;

        margin-bottom: 16px;
        display: block;

        @include breakpoint-down('deskL') {
          margin-bottom: 16px;
        }

        @include breakpoint-down('deskS') {
          margin-bottom: 12px;
        }

        @include breakpoint-down('tabM') {
          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);
          width: 100%;
          margin-bottom: 0;
          padding: 22px 85px 19px 22px;
          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);
        }
      }

      &-body {
        max-width: 165px;

        @include breakpoint-down('deskM') {
          max-width: 139px;
        }

        @include breakpoint-down('tabM') {
          max-width: none;
          overflow: hidden;
          opacity: 0;
          height: 0;
          transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
        }
      }

      &-item {
        margin-bottom: 16px;
        display: flex;

        @include breakpoint-down('deskL') {
          margin-bottom: 16px;
        }

        @include breakpoint-down('deskS') {
          margin-bottom: 12px;
        }

        @include breakpoint-down('tabM') {
          margin-bottom: 0;
          border-bottom: 2px solid rgba(255, 255, 255, 1);
        }

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

          @include breakpoint-down('tabM') {
            border-bottom: 0;
          }
        }
      }

      &-link {
        @include footerLink;

        @include breakpoint-down('tabM') {
          font-size: 17px;
          font-weight: 500;
          line-height: 24px;
          display: flex;
          justify-content: flex-end;

          padding: 19px 85px 19px 21px;
          width: 100%;
          background: $techBlue1;
        }

        &:global(.active) {
          @include breakpoint-down('tabM') {
            background: $techBlue2;
          }
        }
      }

      &:global(.open) {
        .footer__block-body {
          @include breakpoint-down('tabM') {
            opacity: 1;
          }
        }

        .footer__block-header {
          @include breakpoint-down('tabM') {
            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");
          }
        }
      }
    }

    &__text {
      width: 100%;
      padding: 20px;
      border: 1px solid $techBlueSecondary;

      @include breakpoint-down('deskS') {
        padding: 19px 35px;
      }

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

      p {
        @include xSmallDefault;

        color: $techBlueSecondary;
      }
    }

    &__copyright {
      @include smallDefault;

      color: $techBlueSecondary;

      @include breakpoint-down('deskS') {
        width: max-content;
        margin-inline: auto;
      }
    }
  }
</style>