<script lang="ts">
  import arrow from '../../assets/images/arrow.svg';
  import clickOutside from '../../utils/outsideClick.js';

  export let className: string = '';
  export let title: string;
  export let link: string | undefined = undefined;
  export let options: Record<string, string | boolean>[] = [];

  let open = false;
</script>

<div class={`dropdown ${open ? 'active' : ''} ${className}`} use:clickOutside={() => (open = false)}>
  {#if options.length && !link}
    <div class="dropdownBtn" on:click={() => (open = !open)} on:keydown={() => false} role="button" tabindex="0">
      {title}
      <img src={arrow} alt="arrow" />
    </div>
  {:else}
    <a href={link} class="dropdownBtn">{title}</a>
  {/if}
  {#if options}
    <div class="dropdownList">
      {#each options as option}
        {#if option.image}
          <img src={String(option.image)} alt={String(option.name)}>
        {/if}
        <a href={String(option.link)} class="dropdownLink {option.link === '#' ? 'not-click' : ''}">{option.name}</a>
      {/each}
    </div>
  {/if}
</div>

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

  .dropdown {
    position: relative;
    user-select: none;

    .dropdownBtn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 10px 20px;
      border-radius: 16px;
      background: transparent;
      cursor: pointer;
      line-height: 24px;
      font-weight: 500;
      letter-spacing: 0.08px;
      height: 44px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      text-decoration: none;
      color: $blue100;

      > img {
        width: 20px;
        height: 20px;
        transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      }

      &:hover {
        color: $blue200;
      }

      // &:active {
      //   background: #bfbdb4;
      //   border: 1px solid #bfbdb4;
      // }
    }
    &.top {
        .dropdownList {
          top: auto;
          bottom: calc(100% + 8px);
        }
      }
    .dropdownList {
      border-radius: 12px;
      padding: 8px;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      opacity: 0;
      pointer-events: none;
      background: #32364A;

      .dropdownLink {
        height: 41px;
        display: block;
        cursor: pointer;
        padding: 10px 12px;
        border-radius: 10px;
        line-height: 24px;
        font-weight: 500;
        letter-spacing: 0.08px;
        transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
        text-decoration: none;
        color: $blue100;
        z-index: 1;

        &:hover {
          color: #FFFFFF;
          background: $blue400;
        }

        &:active {
          background: $blue600;
        }

        &.not-click {
          pointer-events: none;
          opacity: 0.5;
        }
      }
    }

    &.active {
      .dropdownBtn {
        background: $blue600;
        // border: 1px solid #f0ede8;

        &:active {
          background: #bfbdb4;
        }
      }

      .dropdownList {
        opacity: 1;
        pointer-events: all;
      }

      .dropdownBtn {
        img {
          transform: rotate(-180deg);
        }
      }
    }
  }
</style>