<script lang="ts">
  import intlTelInput from 'intl-tel-input';
  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;
  export let className: string = '';

  let iti;
  let input;
  let focus = false;

  if (type === 'phone') {
    onMount(async () => {
      await import('intl-tel-input/build/js/utils');
      iti = intlTelInput(input, {
        initialCountry: 'auto',
        geoIpLookup: function (callback) {
          fetch('https://ipapi.co/json')
            .then(function (res) {
              return res.json();
            })
            .then(function (data) {
              localStorage.setItem('param__country_code', data.country_code);
              callback(data.country_code);
            })
            .catch(function () {
              localStorage.setItem('param__country_code', 'us');
              callback('us');
            });
        },
        nationalMode: false,
        countrySearch: false,
        autoInsertDialCode: true,
        formatOnDisplay: true,
        autoHideDialCode: true,
        showSelectedDialCode: true,
        separateDialCode: true,
        autoPlaceholder: false,
        preferredCountries: ['gb', 'us', 'de', 'es', 'fr', 'it', 'pt', 'zh'],
      });
    });

    onDestroy(() => iti && iti.destroy());
  }
</script>

<div class="input {value || focus ? 'focus' : ''} {!!error ? 'error' : ''} {className}">
  <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}
      <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/media';
  .input {

    &.min {
      input {
        padding: 27px 12px 9px 16px;
        @include breakpoint-down('mobM') {
          padding: 32px 12px 9px 16px;
        }
      }
    }
    .inputContainer {
      display: block;
      background: #fafafa;
      border-radius: 16px;
      position: relative;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

      &:hover {
        .inputInput {
          border: thin solid #d9d7cc;
        }
      }
    }

    .inputPlaceholder {
      display: block;
      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;
    }

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

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

      &:focus {
        border: thin solid #d9d7cc;

        + .inputPlaceholder {
          top: 12px;
          font-size: 12px;
          font-weight: 400;
          line-height: 18px;
          color: #73726c;
        }
      }
    }

    .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: #73726c;
      }
    }

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

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