window.addEventListener('load', (event) => {
    

    const inputFields = document.querySelectorAll('.input')

    if (typeof(inputFields) == 'undefined' || inputFields == null) return

    function setInputFilled(event){
        const input = event.target
        const wrapper = input.parentElement
        input.value == '' ? wrapper.classList.remove('is-filled') : wrapper.classList.add('is-filled')
    }

    function clearInput(event){
        const field = event.target.parentElement
        let input = field.querySelector('.input__field-input')
        if (input.tagName === 'INPUT') {
            input.value = ''
        }
        if (input.tagName === 'SELECT') {
            input.selectedIndex = 0
        }
        field.classList.remove('is-filled')
    }

    inputFields.forEach(inputField => {
        let input = inputField.querySelector('.input__field input')
        if (input == null || input == undefined) {
            input = inputField.querySelector('.input__field select')
        }
        input.addEventListener('change', setInputFilled)

        let clear = inputField.querySelector('.input__field .input__clear')
        clear.addEventListener('click', clearInput)
    })

})