class

class AddUserToTable {
    constructor(formId, tableId) {
        this._formEl = document.querySelector(formId);
        this._tableEl = document.querySelector(tableId);
        this.onSaveOfAdd();
        this.previewPhotoOnForm();
        // this.editUser();
    }

    onSaveOfAdd() {
        const save = document.querySelector('#save');
        save.addEventListener('click', (event) => {
            event.preventDefault();
            save.disabled = true;
            const valuesIsValid = this.getValues();
            if (!valuesIsValid) {
                save.disabled = false;
                return false;
            } else {
                const values = this.getValues();
                const photoData = async () => {
                    try {
                        // START - Add user with new photo
                        const photo = await this.getPhoto();
                        values.photo = photo;
                        this.addUser(values);
                        // END - Add user with new photo

                        // START - Form Preview
                        const previewPhoto = document.querySelector('#preview-photo');
                        previewPhoto.src = photo;
                        // END - Form preview

                        // START - Reset form
                        this.resetForm();
                        // END - Reset form

                        save.disabled = false;
                    } catch(error) {
                        values.photo = 'https://cdn0.iconfinder.com/data/icons/cyber-crime-or-threats-glyph/120/hacker_cyber_crime-512.png';
                        this.addUser(values);
                        this.resetForm();
                        save.disabled = false;
                    }
                }
                photoData();
            }
        });
    }

    resetForm() {
        const spanFileName = document.querySelector('#filename');
        const previewPhoto = document.querySelector('#preview-photo');
        this._formEl.reset();
        spanFileName.innerHTML = '';
        previewPhoto.src = 'https://cdn.iconscout.com/icon/free/png-256/hacker-7-71228.png';
    }

    onCancelOfAdd() {
        const cancel  = document.querySelector('#cancel');
        cancel.addEventListener('click', () => {
            this.resetForm();
        });
    }

    isValid() {
        let valid = true;
        const user = document.querySelector('[name="user"]');
        const age = document.querySelector('[name="age"]');
        if (!user.value.match(/(?=.*[a-zA-Z-_])[a-zA-Z-_]{3,}/gm) || user.value.match(/[0-9!@#$%¨&*.,()<>?ªº°¢¹²³¬|\/+^~§{}'=]/gm)) {
            user.classList.remove('text-indigo-600', 'border-indigo-600', 'focus:border-indigo-500');
            user.classList.add('text-pink-600', 'border-pink-600', 'focus:border-pink-500');
            user.focus();
            valid = false;
        } else {
            user.classList.remove('text-pink-600', 'border-pink-600', 'focus:border-pink-500');
            user.classList.add('text-indigo-600', 'border-indigo-600', 'focus:border-indigo-500');
        }

        if (!age.value.match(/[0-9]/gm) || age.value.match(/[a-zA-Z]/gm)) {
            age.classList.remove('text-indigo-600', 'border-indigo-600', 'focus:border-indigo-500');
            age.classList.add('text-pink-600', 'border-pink-600', 'focus:border-pink-500');
            age.focus();
            valid = false;
        } else {
            age.classList.remove('text-pink-600', 'border-pink-600', 'focus:border-pink-500');
            age.classList.add('text-indigo-600', 'border-indigo-600', 'focus:border-indigo-500');
        }

        if (valid) { return true } else { return false }
    }

    previewPhotoOnForm() {
        const previewPhoto = document.querySelector('#preview-photo');
        const input = document.querySelector('[name="photo"]');
        input.addEventListener('change', async () => {
            const values = await this.getPhoto();
            previewPhoto.src = values;
        });
    }

    getPhoto() {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            const file = document.querySelector('[name="photo"]').files[0];
            fileReader.onload = () => resolve(fileReader.result);
            fileReader.onerror = (error) => reject(error);
            fileReader.readAsDataURL(file);
        });
    }

    getValues() {
        let data = {}
        let names = [...this._formEl.elements];
        names.forEach((element) => {
            if (element.name === 'developer') {
                if (element.checked) data[element.name] = element.value;
            } else if (element.name === 'gender') {
                if (element.value === '') {
                    data[element.name] = 'undefined';
                } else if (element.value === 'male') {
                    data[element.name] = 'm';
                } else {
                    data[element.name] = 'f';
                }
            } else {
                data[element.name] = element.value;
            }
        });
        if (!this.isValid()) return false;
        return data;
    }

    addUser(data) {
        const tr = document.createElement('tr');
        const tbody = this._tableEl.lastElementChild;

        const typeGender = (value) => {
            if (value === 'm') {
                return 'Masculino';
            } else if (value === 'f') {
                return 'Feminino';
            } else {
                return 'Indefinido';
            }
        }

        tr.innerHTML = `
            <td class="text-white uppercase text-center p-3"><img src="${data.photo}" alt="Perfil" class="mx-auto h-12 w-12 object-cover rounded-full"></td>
            <td class="text-white uppercase text-center p-3">${data.user}</td>
            <td class="text-white uppercase text-center p-3">${data.age}</td>
            <td class="text-white uppercase text-center p-3">${typeGender(data.gender)}</td>
            <td class="text-white uppercase text-center p-3">${data.language}</td>
            <td class="text-white uppercase text-center p-3">${(data.developer === 'yes') ? 'Sim' : 'Não'}</td>
            <td class="text-white uppercase text-center p-3">
                <button data-edit type="send" class="w-full mb-0 md:mb-2 lg:mb-2 px-3 py-1 bg-indigo-700 text-white font-semibold rounded hover:bg-indigo-600 focus:outline-none">Editar</button>
                <button id="delete" type="send" class="w-full mt-2 md:mt-0 lg:mt-0 px-3 py-1 bg-pink-600 text-white font-semibold rounded hover:bg-pink-500 focus:outline-none">Excluir</button>
            </td>
        `;
        tbody.appendChild(tr);
        this.editUser();
    }

    editUser() {
        let buttonEdit = [...document.querySelectorAll('[data-edit]')];
        buttonEdit.forEach((element) => {
            element.addEventListener('click', () => {
                console.log('Cliquei!');
            });
        });
    }

}