<script>
      import { onMount, createEventDispatcher, afterUpdate } from "svelte";

      import isEmail from "validator/lib/isEmail";
      import isEmpty from "validator/lib/isEmpty";

      export let rules = [];
      export let focusInit = false;
      export let type = "text";
      export let label = null;
      export let name = null;
      export let value = null;
      export let disabled = false;
      export let placeholder = "";
      export let autocomplete = null;
      export let emptyClear = false;
      export let adjustClear = false;
      export let valid = false;
      export let showAllError = false;
      export let error= null;

      let inputInstance;
      let thisFieldIsValid = "";
      let showError = false;

      export let showMask = false;
      let inputInstanceMask;
      let hiddenMask = true;


    let firstValidate = true;
      const handlerMask = () => {
        if (showMask) {
          hiddenMask = !hiddenMask;
        } else {
          value = "";
          inputInstance.focus();
        }
      };

      const dispatch = createEventDispatcher();

      onMount(() => {
        setTimeout(() => {
          if (focusInit) inputInstance.focus();
          showError = true;
        }, 200);
        inputInstance.type = type;
        thisFieldIsValid = "";
      });

      afterUpdate(async () => {
        if (valid) {
          thisFieldIsValid = handlerValidator(value);
          valid = false;
        }
        if(error){
          thisFieldIsValid = [error]
          error = false
        }
      });

      const handlerValidator = val => {

        if (!process.browser) {
          return [];
        }
        const errors = [];
        rules.forEach(
          ({ type, required, message, validator, minLength, maxLength }) => {
            if (required) {
              const em = isEmpty(val);
              if (em) {
                errors.push(message || "The element is required");
              }
            }
            if (minLength) {
              if (val.length < minLength) {
                errors.push(message || `Must have minimum ${minLength} characters`);
              }
            }
            if (maxLength) {
              if (val.length > maxLength) {
                errors.push(message || `Must have maximum ${maxLength} characters`);
              }
            }
            if (type === "email") {
              if (!isEmail(val)) {
                errors.push(message || "Invalid email");
              }
            }
            if (validator) {
              validator(val, s => {
                if (s) errors.push(s || "An error occurred");
              });
            }
          }
        );

        const error =
          (errors.length > 0 && ((!showAllError && [errors[0]]) || errors)) || [];

        dispatch("handlerError", errors.length > 0);

        return error;
      };

      $: thisFieldIsValid = handlerValidator(value);
    </script>

    <style>
      input.error {
        border-color: #e02121;
      }
      span.error {
        color: #e02121;
      }
      input.hidden {
        display: none;
      }
      .maskToogle {
        position: absolute;
        right: 2px;
        width: 28px;
        font-size: 14px;
        background: transparent;
        border-radius: 50%;
        color: rgb(0, 0, 0);
        text-align: center;
        text-decoration: none;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
      }
      .maskToogle:hover {
        cursor: pointer;
      }
      .adjustClear {
        top: 8px;
      }
    </style>

    <div class="form-group">
      {#if label}
        <label class="label-{name}" for="input-{name}"> {label} </label>
      {/if}

      {#if (type === 'password' && showMask) || (emptyClear && !isEmpty(value))}
        <div class="maskToogle" class:adjustClear on:click={handlerMask}>
          {#if emptyClear && !isEmpty(value)}
            <span class="pe-7s-trash" />
          {:else}
            <span class="pe-7s-{hiddenMask ? 'shield' : 'note2'}" />
          {/if}
        </div>
      {/if}

      {#if type === 'password' && showMask}
        <input
          bind:this={inputInstanceMask}
          type="text"
          bind:value
          {autocomplete}
          {disabled}
          class="form-control"
          class:error={thisFieldIsValid.length > 0 && showError}
          class:hidden={hiddenMask}
          id="input-{name}-mask"
          {placeholder} />
      {/if}

      <input
        bind:this={inputInstance}
        type="text"
        bind:value
        {autocomplete}
        {disabled}
        class="form-control"
        class:error={thisFieldIsValid.length > 0 && showError}
        class:hidden={!hiddenMask}
        id="input-{name}"
        {placeholder} />

      {#if showError}
        {#each thisFieldIsValid as someError}
          <span class="error">{someError}</span>
        {/each}
      {/if}

    </div>