<script lang="ts">
  import stickIcon from '../../../assets/icons/stick.svg';
  import errorIcon from '../../../assets/icons/error.svg';
  export let name = '';
  export let className = '';
  export let isValid: boolean | null = null;
  export let placeholder = '';
  export let value = '';
  export let onChange: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void = () => null;
  export let error: string | undefined = undefined;
  export let type: 'text' | 'number' = 'text';
  export let maxlength: number | undefined = undefined;
  export let required: boolean | undefined = undefined;

  let inputRef: HTMLInputElement;

  export function getRef() {
    return inputRef;
  }

  $: isValue = value !== undefined && value !== null && value !== '';

  const onKeyPressInput = (e:KeyboardEvent) => {
    if(!maxlength) return;
    if (value.length >= maxlength) {
      e.preventDefault();
    }
    if (type === 'number' && (e.key === '-' || e.key === '+')) {
      e.preventDefault();
    }
  }

  const onInput = (e: Event & { currentTarget: EventTarget & HTMLInputElement; }) => {
    if(type === 'number') {
      console.log();
      e.currentTarget.value = e.currentTarget.value.replace(/^0/g, '');
    }
    onChange(e);
  }

  let focus = false;
</script>

<div class="input {isValue ? 'value' : ''} {focus ? 'focus' : ''} {error ? 'error' : ''} {className}">
  <label class="inputContainer" for={name}>
    <input
      bind:this={inputRef}
      id={name}
      {name}
      value={value}
      {type}
      class="inputInput"
      on:input={onInput}
      on:focusout={() => (focus = false)}
      on:focus={() => (focus = true)}
      on:keypress={onKeyPressInput}
      {maxlength}
      {required}
    />
    <span class="inputPlaceholder">{placeholder}</span>
    <span class="inputIcon">
      {#if isValid !== null}
        {#if isValid}
          <img src={stickIcon} alt="" />
        {:else}
          <img src={errorIcon} alt="" />
        {/if}
      {/if}
    </span>
    {#if error !== undefined}
      <p class="inputError">{error}</p>
    {/if}
  </label>
</div>

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

  .input {
    .inputContainer {
      display: block;
      position: relative;
    }

    .inputInput {
      width: 100%;
      outline: none;
      padding: 23px 68px 9px 24px;
      border-radius: 4px;
      border: 1px solid $techBlueSecondary;
      background: $techBlue1;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      height: auto;

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

      &:-webkit-autofill {
        border: thin solid #d9d7cc;
      }
    }

    .inputPlaceholder {
      display: block;
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 24px;
      right: 24px;
      transition: 0.2s cubic-bezier(0.46, 0.03, 0.52, 0.96);
      will-change: transform;
      color: $techBluePrimary;
    }

    .inputIcon {
      display: flex;
      pointer-events: none;
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;

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

    .inputError {
      position: absolute;
      top: -9px;
      right: 24px;
      z-index: 1;
      border-radius: 4px;
      background: $redPrimary;
      padding: 2px 8px;
      color: $techWhite;
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
    }

    &.focus {
      .inputInput {
        border: 1px solid $techGrey;
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
      }
      .inputPlaceholder {
        top: 10px;
        font-weight: 400;
        transform: none;
        font-size: 9px;
        line-height: 12px;
      }
    }

    &.value {
      .inputInput {
        border: 1px solid $techBlueSecondary;
        box-shadow: none;
      }

      .inputPlaceholder {
        top: 10px;
        font-weight: 400;
        transform: none;
        font-size: 9px;
        line-height: 12px;
      }
    }

    &.error {
      .inputInput {
        border: 1px solid $redPrimary;
        background: $redPrimary10;
      }

      .inputPlaceholder {
        color: $fontPrimary;
      }
    }
    &.bordered {
      .inputPlaceholder {
        @include breakpoint-down('tabM') {
          left: 12px !important;
        }
      }
      &.value, &.focus {
        .inputPlaceholder {
          @include breakpoint-down('tabL') {
            top: 8px;
          }
          @include breakpoint-down('tabM') {
            top: 5px;
          }
        }
      }
      .inputInput {
        @include breakpoint-down('tabM') {
          font-size: 12px;
          line-height: 14.4px;
        }
      }
    }
  }
  .inputOnce {
    .inputInput {
      border-radius: 12px;
      padding: 18px 24px 6px;
      @include breakpoint-down('deskS') {
        font-size: 16px;
        line-height: 19.49px;
      }
      @include breakpoint-down('tabM') {
        font-size: 12px;
        line-height: 14.4px;
        padding: 12px;
        padding-top: 18px;
        padding-bottom: 6px;
      }
    }
    .inputPlaceholder {
      @include breakpoint-down('tabM') {
        left: 12px;
      }
    }
  }

</style>