<script lang="ts">
  export let title: string | undefined;
  export let i: number | undefined;
  export let text: string | undefined;
  export let large: boolean | undefined = false;

  const Accordion = (e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) => {
    let item: HTMLElement | null | undefined = e?.currentTarget?.parentElement?.parentElement;

    if (!item) {
      return;
    }

    const list: HTMLElement | null = item.querySelector('[data-accordion="container"]');

    if (!list) {
      return;
    }

    contains(item) ? close(item, list) : open(item, list);
  };

  const contains = (item: HTMLElement) => {
    return item.classList.contains('accordion--active');
  };

  const open = (item: HTMLElement, list: HTMLElement) => {
    removeActive();
    list.style.maxHeight = list.scrollHeight + 'px';
    item.classList.add('accordion--active');
  };
  const close = (item: HTMLElement, list: HTMLElement) => {
    list.style.maxHeight = '';
    item.classList.remove('accordion--active');
  };

  const removeActive = () => {
    let itemsActive = document.querySelectorAll('.accordion.accordion--active');

    itemsActive.forEach((active) => {
      const list: HTMLElement | null = active.querySelector('.accordion__list');

      if (!list) {
        return;
      }

      active.classList.remove('accordion--active');
      list.style.maxHeight = '';
    });
  };
</script>

<div class="accordion" data-widget="accordion">
  <div class="accordion__container">
    <div class="accordion__btn" on:click={(e) => Accordion(e)} on:keydown={() => false} role="button" tabindex="0">
      <div class="accordion__title">
        <span class="accordion__title-number">{i !== undefined ? `${i + 1}.`:''}</span>
        <span class="accordion__title-text">{@html title ?? ''}</span>
      </div>
      <div class="accordion__arrow">
        {#if large}
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 9L12 15L18 9" stroke="#E62334" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        {:else}
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 9L12 15L18 9" stroke="#E62334" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          {/if}
      </div>
    </div>
    <div class="accordion__list" data-accordion="container">
      <div class="accordion__inner">
        <p>{@html text ?? ''}</p>
      </div>
    </div>
  </div>
</div>

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

  .accordion {
    overflow: hidden;
    padding: 24px 0;
    border-bottom: 1px solid $techBlue2;
    will-change: transform;

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

    &__btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      z-index: 1;
      position: relative;
      transition: 0.3s ease-in-out 0.3s;
    }

    &__title {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 20px;
      line-height: 28px;
      color: black;
      padding-left: 64px;
      position: relative;
      max-width: 90%;

      @include breakpoint-down('tabL') {
        padding-left: 60px;
        font-size: 16px;
        line-height: 24px;
      }

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

      &-number {
        font-family: $Suisse;
        color: #A0A0A0;
        position: absolute;
        left: 21px;

        @include breakpoint-down('tabL') {
          left: 17px;
        }

        @include breakpoint-down('tabM') {
          font-size: 20px;
          line-height: 28px;
          left: 0;
        }
      }
    }

    &__arrow {
      display: flex;
      margin-right: 12px;
      transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);

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

    &__list {
      width: 100%;
      transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
      pointer-events: none;
      max-height: 0;
      opacity: 0;
    }

    &__inner {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.6;
      color: #57575A;
      margin-left: 64px;

      @include breakpoint-down('tabL') {
        margin-left: 60px;
        font-size: 12px;
        line-height: 14px;
      }

      @include breakpoint-down('tabM') {
        margin-left: 0px;
      }
    }
  }

  :global(.accordion--active) {
    .accordion {
      &__list {
        opacity: 1;
      }

      &__btn {
        transition: 0.3s ease-in-out;
        margin-bottom: 27px;

        @include breakpoint-down('tabL') {
          margin-bottom: 15px;
        }
      }

      &__inner {
        padding-bottom: 20px;

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

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