<script lang="ts">

  import { onDestroy, onMount } from 'svelte';

  export let name = '';
  export let type = '';
  export let placeholder = '';
  export let value = '';
  export let onChange;
  export let error: string | undefined = undefined;

  let input;
  let focus = false;
  
  let passwordTypeStatus: boolean = true;
  const onPasswordTypeChange = () => {
    passwordTypeStatus = !passwordTypeStatus;
  }
  $: inputType = passwordTypeStatus ? 'password' : 'text'; 
</script>

<div class="input {value || focus ? 'focus' : ''} {!!error ? 'error' : ''}">
  <label class="inputContainer" for={name}>
    {#if type === 'phone'}
      <input
        id={name}
        {name}
        type="tel"
        bind:this={input}
        bind:value
        class="inputInput"
        on:input={onChange}
        on:blur={() => {
          focus = false;
        }}
        on:focus={() => {
          focus = true;
        }}
      />
    {:else if type === 'password'}
      <div class="passwordContainer">
        <input id={name} {name} type={inputType} {value} class="inputInput" on:input={onChange} />
        <button class="eye" on:click={onPasswordTypeChange}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#8B8FB6" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.01677 10.5942C1.90328 10.4145 1.84654 10.3246 1.81477 10.186C1.79091 10.0819 1.79091 9.91775 1.81477 9.81366C1.84654 9.67507 1.90328 9.58522 2.01677 9.40552C2.95461 7.92054 5.74617 4.1665 10.0003 4.1665C14.2545 4.1665 17.0461 7.92054 17.9839 9.40552C18.0974 9.58522 18.1541 9.67507 18.1859 9.81366C18.2098 9.91775 18.2098 10.0819 18.1859 10.186C18.1541 10.3246 18.0974 10.4145 17.9839 10.5942C17.0461 12.0791 14.2545 15.8332 10.0003 15.8332C5.74617 15.8332 2.95461 12.0791 2.01677 10.5942Z" stroke="inherit" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10.0003 12.4998C11.381 12.4998 12.5003 11.3805 12.5003 9.99984C12.5003 8.61913 11.381 7.49984 10.0003 7.49984C8.61962 7.49984 7.50034 8.61913 7.50034 9.99984C7.50034 11.3805 8.61962 12.4998 10.0003 12.4998Z" stroke="inherit" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>

    {:else}
      <input id={name} {name} type="text" bind:value class="inputInput" on:input={onChange} />
    {/if}
    <span class="inputPlaceholder">{placeholder}</span>
  </label>
  {#if error !== undefined}
    <p class="inputError">{error}</p>
  {/if}
</div>

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

  .input {
    .inputContainer {
      display: block;
      background: $blue600;
      border-radius: 16px;
      position: relative;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      border: none;
      &:hover {
        .inputInput {
        }
      }
    }

    .passwordContainer {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20px;
      .eye {
        border: none;
        background-color: transparent;
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        transition: 0.1s cubic-bezier(0.65, 0.05, 0.36, 1);
        cursor: pointer;
        svg {
          transition: 0.1s cubic-bezier(0.65, 0.05, 0.36, 1);
        }
        &:hover svg {
          stroke: $blue100;
        }
        &:active svg {
          stroke: $blue300;
        }
      }
    }

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

    .inputInput {
      width: 100%;
      outline: none;
      background: transparent;
      padding: 30px 56px 12px 16px;
      color: $blue200;
      caret-color: $blue200;
      border-radius: 16px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

      &:-webkit-autofill {

      }

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

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

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

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

        &:hover {
          background: #faeded;
        }
      }
    }
  }
</style>