<script lang="ts">
  import close from '../../../assets/images/main/plans/close.svg';
  import stick from '../../../assets/images/main/plans/stick.svg';
  import stickW from '../../../assets/images/main/plans/stickW.svg';
  import { popupForm } from '../../../store';

  const items = [
    {
      title: 'Standard',
      price: '$ 20.000',
      popular: false,
      options: [
        {
          title: 'Web-Mobile Traderoom',
          active: true,
        },
        {
          title: 'Quotes & Liquidity',
          active: true,
        },
        {
          title: 'CRM',
          active: true,
        },
        {
          title: 'Dealing desk',
          active: true,
        },
        {
          title: 'KYC',
          active: false,
        },
        {
          title: 'Antifraud',
          active: false,
        },
        {
          title: 'Intergrated PSPs',
          active: false,
        },
        {
          title: 'Technical SMS',
          active: false,
        },
        {
          title: 'Technical emails',
          active: false,
        },
        {
          title: 'iOS app',
          active: false,
        },
        {
          title: 'Android app',
          active: false,
        },
        {
          title: 'UCC',
          active: false,
        },
        {
          title: 'Affiliate Module',
          active: false,
        },
        {
          title: 'Sales Module',
          active: false,
        },
      ],
    },
    {
      title: 'Turnkey',
      price: '$ 42.000',
      popular: true,
      options: [
        {
          title: 'Web-Mobile Traderoom',
          active: true,
        },
        {
          title: 'Quotes & Liquidity',
          active: true,
        },
        {
          title: 'CRM',
          active: true,
        },
        {
          title: 'Dealing desk',
          active: true,
        },
        {
          title: 'KYC',
          active: true,
        },
        {
          title: 'Antifraud',
          active: true,
        },
        {
          title: 'Intergrated PSPs',
          active: true,
        },
        {
          title: 'Technical SMS',
          active: true,
        },
        {
          title: 'Technical emails',
          active: true,
        },
        {
          title: 'iOS app',
          active: true,
        },
        {
          title: 'Android app',
          active: true,
        },
        {
          title: 'UCC',
          active: true,
        },
        {
          title: 'Affiliate Module',
          active: true,
        },
        {
          title: 'Sales Module',
          active: true,
        },
      ],
    },
    {
      title: 'Advanced',
      price: '$ 30.000',
      popular: false,
      options: [
        {
          title: 'Web-Mobile Traderoom',
          active: true,
        },
        {
          title: 'Quotes & Liquidity',
          active: true,
        },
        {
          title: 'CRM',
          active: true,
        },
        {
          title: 'Dealing desk',
          active: true,
        },
        {
          title: 'KYC',
          active: true,
        },
        {
          title: 'Antifraud',
          active: true,
        },
        {
          title: 'Intergrated PSPs',
          active: true,
        },
        {
          title: 'Technical SMS',
          active: true,
        },
        {
          title: 'Technical emails',
          active: true,
        },
        {
          title: 'iOS app',
          active: false,
        },
        {
          title: 'Android app',
          active: false,
        },
        {
          title: 'UCC',
          active: false,
        },
        {
          title: 'Affiliate Module',
          active: false,
        },
        {
          title: 'Sales Module',
          active: false,
        },
      ],
    },
  ];

  let optionActive: null | number = null;

  const handleClick = (id: number) => {
    optionActive = id === optionActive ? null : id;
  };
</script>

<div class="block-plans">
  <div class="container">
    <p class="block-plans__title">Don't even think about development!</p>
    <p class="block-plans__subtitle">Let us do it right for you!</p>
    <div class="block-plans__list">
      {#each items as item, index}
        <div class="block-plans__plan {item.popular ? 'popular' : ''}">
          <div class="block-plans__planHeader">
            <p class="block-plans__planName">{item.title}</p>
            <div class="block-plans__planPrice">
              <p class="block-plans__planPriceNumber">{item.price}</p>
            </div>
          </div>
          <div class="block-plans__planOptions {index === optionActive ? 'active' : ''}">
            {#each item.options as option}
              <div class="block-plans__planOption">
                <div class="block-plans__planOptionName">{option.title}</div>
                {#if item.popular}
                  <img
                    src={option.active ? stickW : close}
                    alt=""
                    class="block-plans__planOptionActive"
                    loading="lazy"
                  />
                {:else}
                  <img
                    src={option.active ? stick : close}
                    alt=""
                    class="block-plans__planOptionActive"
                    loading="lazy"
                  />
                {/if}
              </div>
            {/each}
          </div>
          <div
            class="block-plans__planButton"
            on:click={() => popupForm.set(true)}
            on:keydown={(event) => {
              if (event.key === 'Escape') {
                popupForm.set(false);
              }
            }}
            role="button"
            tabindex="0"
          >
            Get started
          </div>
          <div
            class="block-plans__planOptionsBtn {item.popular ? 'white' : ''} {index === optionActive ? 'active' : ''}"
            role="button"
            tabindex="0"
            on:click={() => handleClick(index)}
            on:keydown={() => false}
          >
            <span>{index === optionActive ? 'Hide' : 'Details'}</span>
            <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="0.5" width="22" height="22" rx="11" fill="#323232" fill-opacity="0.05" />
              <path d="M7.5 9L11.5 13L15.5 9" stroke="#141414" stroke-width="2" />
            </svg>
          </div>
        </div>
      {/each}
    </div>
  </div>
</div>

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

  .block-plans {
    padding: 120px 0 118px;
    background: $techBlue1;

    @include breakpoint-down('deskL') {
      padding: 80px 0 115px;
    }

    @include breakpoint-down('deskS') {
      padding: 64px 0 90px;
    }

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

    &__title {
      @include titleXL;

      text-align: center;
      width: 100%;
      max-width: 560px;
      margin-inline: auto;
      margin-bottom: 50px;
      position: relative;

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

      @include breakpoint-down('deskS') {
        max-width: 360px;
        margin-bottom: 34px;
      }

      &:after {
        content: '';
        position: absolute;
        top: calc(100% + 24px);
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: 77px;
        background: $redPrimary;

        @include breakpoint-down('deskS') {
          top: calc(100% + 16px);
        }

        @include breakpoint-down('tabM') {
          width: 49px;
        }
      }
    }

    &__subtitle {
      @include titleM;

      text-align: center;
      margin-bottom: 80px;

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

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

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

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

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

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        gap: 24px;
        margin-left: -20px;
        width: calc(100% + 20px * 2);
      }
    }

    &__plan {
      flex: 1;
      border-radius: 16px;
      border: 1px solid $techBlue2;
      background: $techWhite;
      padding: 23px 0;

      @include breakpoint-down('deskS') {
        width: calc((100% - 20px * 2) / 3);
      }

      @include breakpoint-down('tabM') {
        min-width: 100%;
        display: flex;
        flex-direction: column;
      }

      &.popular {
        background: $redPrimary;
        border: none;
        padding: 40px 0;

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

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

        .block-plans__planName,
        .block-plans__planPrice,
        .block-plans__planOptionName {
          color: $techWhite;
        }

        .block-plans__planPriceNumber {
          font-size: 34px;
          font-weight: 700;
          line-height: 37px;

          @include breakpoint-down('deskS') {
            font-size: 28px;
            line-height: 32px;
          }
        }

        .block-plans__planOption {
          border-bottom: 1px solid $techWhite15;
        }

        .block-plans__planButton {
          background: $fontPrimary;
          color: $techWhite;
        }
      }
    }

    &__planHeader {
      padding: 0 66.5px;
      margin-bottom: 18px;

      @include breakpoint-down('deskL') {
        padding: 0 40px;
      }

      @include breakpoint-down('deskS') {
        padding: 0 21px;
        margin-bottom: 8px;
      }

      @include breakpoint-down('tabM') {
        margin-bottom: 24px;
        padding-bottom: 8px;
        border-bottom: 1px solid #3232320d;
        order: 1;
      }
    }

    &__planName {
      @include baseTitle;

      margin-bottom: 8px;
      text-align: center;

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

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

    &__planPrice {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
    }

    &__planPriceNumber {
      font-size: 28px;
      font-weight: 700;
      line-height: 31px;

      @include breakpoint-down('deskS') {
        font-size: 24px;
        line-height: 26px;
      }
    }

    &__planPriceTime {
      min-width: 114px;

      @include breakpoint-down('deskS') {
        min-width: 54px;
      }
    }

    &__planOptions {
      padding: 24px;
      margin-bottom: 18px;

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

      @include breakpoint-down('tabM') {
        display: none;
        padding: 24px 36.5px;
        order: 3;
      }

      &.active {
        display: block;
      }
    }

    &__planOption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3.2px 0;
      border-bottom: 1px solid $techBlue2;

      @include breakpoint-down('deskL') {
        padding: 2.6px 0;
      }

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

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

    &__planOptionName {
      @include smallCTA;
    }

    &__planOptionActive {
      width: 30px;
      height: 30px;

      @include breakpoint-down('deskS') {
        width: 24px;
        height: 24px;
      }
    }

    &__planButton {
      @include baseCTA;

      cursor: pointer;
      border-radius: 64px;
      border: 1px solid $fontPrimary;
      padding: 12px 49px;
      width: max-content;
      margin-inline: auto;

      @include breakpoint-down('deskL') {
        padding: 12px 55px;
      }

      @include breakpoint-down('deskS') {
        padding: 8px 40px;
      }

      @include breakpoint-down('tabM') {
        padding: 7px 55px;
        margin-bottom: 8px;
        order: 2;
      }
    }

    &__planOptionsBtn {
      align-items: center;
      gap: 10px;
      width: max-content;
      margin-inline: auto;
      display: none;

      @include breakpoint-down('tabM') {
        display: flex;
        order: 4;
      }

      &.white {
        color: white;

        svg {
          path {
            stroke: $techWhite;
          }
        }
      }

      &.active {
        > svg {
          transform: rotate(180deg);
        }
      }
    }
  }
</style>