<script>
  import { createEventDispatcher } from "svelte";
  import { t } from "svelte-i18n";

  /** @type {string} */
  export let name;

  /** @type {string} */
  export let type = "text";

  /** @type {string} */
  export let value = "";

  /** @type {string} */
  export let placeholder = "";

  /** @type {string} */
  export let label = "";

  /** @type {string} */
  export let otherPasswordValue = "";

  /** @type {boolean} */
  export let toUpperCase = false;

  const dispatch = createEventDispatcher();

  /**
   * @param {Event} event - The input event
   */
  function handleInput(event) {
    const target = event.target;

    if (target instanceof HTMLInputElement) {
      let inputValue = target.value;
      if (toUpperCase) {
        inputValue = inputValue.toUpperCase();
        target.value = inputValue; // Update the input field value
      }
      value = inputValue;
      // dispatch("input", { name, value: inputValue });
    }
  }

  /**
   * Validates the field
   * @param {string} name - The name of the field
   * @param {string} value - The value of the field
   * @returns {string|null} The error message or null if valid
   */
  function validateField(name, value) {
    switch (name) {
      case "first_name":
      case "last_name":
      case "address":
      case "city":
      case "account_holder_name":
      case "bank":
        return value.trim() ? null : $t("required");
      case "birth_date":
      case "membership_start_date":
        return value.trim() ? null : $t("required_date");
      case "email":
        return /^\S+@\S+\.\S+$/.test(value) ? null : $t("invalid_email");
      case "password":
      case "password2":
        if (!value.trim()) {
          return null;
        }
        if (value.length < 8) {
          return $t("required_password");
        }
        if (otherPasswordValue && value !== otherPasswordValue) {
          return $t("required_password_match");
        }
        return null;
      case "phone":
        return /^\+?[0-9\s()-]{7,}$/.test(value) ? null : $t("invalid_phone");
      case "zip_code":
        return /^\d{5}$/.test(value) ? null : $t("invalid_zip_code");
      case "iban":
        return /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
          ? null
          : $t("invalid_iban");
      case "bic":
        return /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
          ? null
          : $t("invalid_bic");
      default:
        return null;
    }
  }

  $: error = validateField(name, value);
</script>

<div class="input-box">
  <span class="label">{label}</span>
  <div class="input-error-container">
    {#if error}
      <span class="error-message">{error}</span>
    {/if}
    <input
      {name}
      {type}
      {placeholder}
      {value}
      on:input={handleInput}
      on:blur={handleInput}
      class="input"
    />
  </div>
</div>

<style>
  .input-error-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 444px;
  }

  .error-message {
    color: #eb5424;
    font-size: 12px;
    margin-bottom: 5px;
    align-self: flex-start;
  }

  .input {
    width: 100%;
  }
</style>
