<script lang="ts">
  import arrow from '../../assets/images/arrow.svg';
  import clickOutside from '../../utils/outsideClick.js';
  import { browser } from '$app/environment';

  export let onChange: (e: any) => void;
  export let options: string[] = [];
  export let value: any = undefined;
  export let placeholder = '';
  export let name = '';
  export let error: string | undefined = undefined;

  let open = false;

  let matches = false;

  if (browser) {
    matches = window.matchMedia('(max-width: 1024px)').matches;
  }
</script>

<div
  class="select {open ? 'active' : ''} {!!error ? 'error' : ''}"
  use:clickOutside={() => {
    open = false;
  }}
>
  {#if matches}
    <div class="selectPlaceholder">{placeholder}</div>
    <select
      class="selectDefaultF"
      {value}
      on:change={(e) => {
        if (e?.target?.value) {
          onChange(name, Number(e.target.value));
          open = false;
        }
      }}
      on:keydown={() => false}
    >
      {#each options as option, index}
        <option value={index}>{option}</option>
      {/each}
    </select>
  {:else}
    <div
      class="selectBtn {value !== undefined ? 'focus' : ''}"
      on:click={() => {
        if (open) {
          open = false;
        } else {
          open = true;
        }
      }}
      on:keydown={() => false}
      role="button"
      tabindex="0"
    >
      <div class="selectPlaceholder">{placeholder}</div>
      <div class="selectText">
        {#if value !== undefined}
          <p class="selectValue">{options[value]}</p>
        {/if}
      </div>
      <div class="selectArrow">
        <img src={arrow} alt="arrow" />
      </div>
    </div>
    <div class="selectList">
      {#each options as option, index}
        <div
          tabindex={index}
          class={value === index ? 'selected' : ''}
          data-value={option}
          on:click={() => {
            onChange(name, index);
            open = false;
          }}
          on:keydown={() => false}
          role="button"
        >
          {option}
        </div>
      {/each}
    </div>
  {/if}
  {#if error !== undefined}
    <p class="selectError">{error}</p>
  {/if}
</div>

<style lang="scss">
  @import '../../scss/media';  
  @import '../../scss/variables';
  .select {
    position: relative;

    &:global(.solutionSelects) {
      max-width: 782px;
      width: 100%;
    }

    .selectBtn {
      background: $blue600;
      padding: 30px 56px 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 16px;
      cursor: pointer;
      position: relative;
      min-height: 66px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

      .selectPlaceholder {
        pointer-events: none;
        position: absolute;
        top: 21px;
        left: 16px;
        right: 56px;
        transition: 0.2s cubic-bezier(0.46, 0.03, 0.52, 0.96);
        will-change: transform;
      }

      &.focus {
        .selectPlaceholder {
          top: 12px;
          font-size: 12px;
          font-weight: 400;
          line-height: 18px;
          color: $blue300;
        }
      }

      &:hover {
      }
    }

    .selectError {
      padding-left: 16px;
      margin-top: 8px;
      color: #fe150d;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
    }

    .selectText {
      width: calc(100% - 24px - 104px);

      .selectValue {
        color: $blue200;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.5px;
      }
    }

    .selectArrow {
      display: flex;
      align-items: center;
      width: 25px;
      height: 25px;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      padding: 3px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .selectList {
      color: $blue200;
      background: $blue600;
      border-radius: 12px;
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      right: 0;
      padding: 8px;
      pointer-events: none;
      opacity: 0;
      z-index: 2;
      height: 205px;
      overflow-x: hidden;
      overflow-y: auto;

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

      > div {
        cursor: pointer;
        padding: 10px 12px;
        transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

        &:hover {
          background: $blue500;
          border-radius: 12px;
        }

        &.selected {
          color: $blue100;
        }
      }
    }

    &.active {
      .selectArrow {
        transform: rotate(-180deg) translateY(50%);
      }

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

    &.error {
      .selectBtn {
        outline: thin solid #fe150d;

        &:hover {
          background: #faeded;
        }
      }

      .selectDefaultF {
        border: thin solid #fe150d;
      }
    }
  }

  .selectPlaceholder {
    pointer-events: none;
    position: absolute;
    left: 16px;
    right: 56px;
    transition: 0.2s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    will-change: transform;
    top: 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: $blue300;
    z-index: 1;
  }

  .selectDefaultF {
    width: 100%;
    outline: none;
    appearance: none;
    background-color: $blue600;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='16' viewBox='0 0 28 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L14 14L26 2' stroke='%23313236' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 16px 10px;
    background-position: calc(100% - 20px) center;
    padding: 30px 56px 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    min-height: 66px;
    border: none;
    transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
    color: $blue200;

    option {
      color: $blue200;
      padding: 6px 12px;
    }
  }
</style>