interface IError {
  [key: string]: string;
}

export const handle = (errors: IError = {}, form: HTMLFormElement, formName: string) => {
  if (!formName) {
    console.error('Error handling cannot be done due to missing the form name');
    return;
  }

  resetError(form);

  for (const inputName in errors) {
    const input = form.querySelector(`#${formName}-${inputName}`);

    if (!input) continue;

    const field = input.closest('.form-field') || input.closest('.checkbox');
    const error =
      field?.querySelector('.form-field__error') || field?.querySelector('.checkbox__error');

    if (error) {
      error.innerHTML = errors[inputName];
    }

    if (!field) continue;

    field.classList.add('error');
  }
};

export const resetError = (form?: HTMLFormElement) => {
  if (!form) return false;
  const field = form.querySelectorAll('.form-field.error');
  const checkbox = form.querySelectorAll('.checkbox.error');

  if (checkbox.length !== 0) {
    Array.from(checkbox).forEach((el) => el.classList.remove('error'));
  }

  if (field.length !== 0) {
    Array.from(field).forEach((el) => el.classList.remove('error'));
  }
};