import {AxiosError} from "axios"

export function displayFormErrors(error: AxiosError, form: HTMLElement|null = null) {
    if (error.response && error.response.status === 422) {
        // @ts-expect-error test axios error
        const errors = error.response.data.errors
        const formBase = (form) ? form : document.body
        Object.entries(errors).forEach(([key, value]) => {
            displayError(key, value, formBase)
        })
    }
}

export interface ValidationErrors {
    response: {
        status: number,
        data: {
            errors: object
            message?: string,
        }
    },
    message?: string,
}

export function displayError(key: string, message: string, form: HTMLElement|null = null) {
    const formBase = (form) ? form : document
    const input = formBase.querySelector(`input[name="${key}"], select[name="${key}"], textarea[name="${key}"]`)
    if (input) {
        const formControl = input.closest('.form-control')
        if (formControl) {
            formControl.classList.add('invalid-control')
            const errorMessage: HTMLElement|null =  formControl.querySelector('.error-message')
                if (errorMessage) {
                    errorMessage.innerText = message
                }
            if(key === 'form_info') {
                formControl.classList.remove('hidden')
            }
        }
    }
}

export function cleanErrorsForm(form = null) {
    const formBase = (form) ? form : document.body
    const inputsErrors = formBase.querySelectorAll('.invalid-control')
    inputsErrors.forEach(input => {
        input.classList.remove('invalid-control')
        const errorMessage: HTMLElement|null = input.querySelector('.error-message')
        if (errorMessage) {
            errorMessage.innerText = ''
        }
    })
}