/**
 * Adds ucfirst method to String object
 */
;String.prototype.ucfirst = function () {
    return this.charAt(0).toUpperCase() + this.slice(1);
};

/**
 * Creates client data sheet
 *
 * The data sheet is created by the data provided by the form. The form data might be initialized by imported json
 * data.
 */
+function () {
    const formId = 'uc-cds-608',
        form = document.getElementById(formId),
        importForm = document.getElementById('importclientdata-614'),
        specialChars = "!@$%?*+-_",
        hashids = new Hashids(
            "LihDfg!" + Math.random(), 10,
            specialChars + "abcdefghijkmnopqrstuvwxyz" + specialChars + "123456789ABCDEFGHIJKLMNPQRSTUVWXYZ" + specialChars
        ),
        hashidsLower = new Hashids(
            "LihDfg!" + Math.random(), 10,
            "123456789abcdefghijkmnopqrstuvwxyz!@$%?*+_"
        );

    const data = {
        client: {
            company: '',
            firstName: '',
            lastName: '',
            phone: '',
            email: '',
            country: '',
        },
        domain: {
            provider: '',
            name: '',
        },
        hosting: {
            provider: '',
            serverName: '',
            clientUserName: '',
            clientUserPassword: '',
            ftpUserName: '',
            ftpUserPassword: '',
            email1: '',
            email2: '',
            email3: '',
            password1: '',
            password2: '',
            password3: '',
            temporaryUrl: '',
        },
        db: {
            name: '',
            user: '',
            password: '',
        },
        typo3: {
            installToolPassword: '',
            beUser: '',
            bePassword: '',
        },
        seo: {
            firstName: '',
            lastName: '',
            birthDate: '',
            mobile: '',
            email: '',
            password: '',
        },
        various: {
            notes: '',
            agencyRef: '',
        },

        initCategory: function (category) {
            Object.keys(this[category]).forEach(key => {
                if (typeof (this[category][key]) === 'string') {
                    this[category][key] = getInputValueFor(category, key);
                }
            });
        },

        /**
         * Initializes data from form data
         */
        init: function () {
            this.initCategory('client');
            this.initCategory('domain');
            this.initCategory('hosting');
            this.initCategory('db');
            this.initCategory('typo3');
            this.initCategory('seo');
            this.initCategory('various');

            if (!this.hosting.password) {
                this.hosting.password = getPassword();
            }
            if (!this.seo.password) {
                this.seo.password = getPassword();
            }
            const d = new Date();
            const date =  d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
            if (document.getElementById('uc-cs-id') === null) {
                const div = document.createElement('div');
                div.innerHTML = '<p id="uc-cs-id" class="text-muted"></p>';
                document.querySelector('h1').parentElement.appendChild(div.firstChild);
            }
            document.getElementById('uc-cs-id').html = date;
        }
    };

    const sheet = {
        fill: function (data) {
            Object.keys(data).forEach(function (category) {
                Object.keys(data[category]).forEach(function (field) {
                    const els = document.querySelectorAll('.uc-cs-' + category + '-' + field);
                    els.forEach(el => el.textContent = data[category][field]);
                });
            });

            // Notes
            const notesElement = document.querySelector('.uc-cs-various-notes');
            if ( data.various.notes ) {
                const notes = data.various.notes.replace(/(?:\r\n|\r|\n)/g, '<br />');
                notesElement.htmlContent = notes;
                notesElement.closest('tr').style.display = 'table-row';
            } else {
                notesElement.closest('tr').style.display =  'none';
            }

            // Birthdate
            const birthdate = new Date(data.seo.birthDate);
            document.querySelector('.uc-cs-seo-birthDate').textContent = birthdate.toLocaleDateString();

            // Raw data
            let jsonData = JSON.stringify(data);
            // Replaces spaces with non breaking spaces (&nbsp;)
            jsonData = jsonData.replace(/\s+/g, String.fromCharCode(160));
            // For aesthetic reasons: Adds a space between properties to allow line breaks between property definitions
            jsonData = jsonData.replace(/\",\"+/g, '", "');
            document.getElementById('uc-cs-json').textContent = jsonData
        }
    };

    function getPassword(hi = hashids) {
        return hi.encode(Math.floor(Math.random() * Math.pow(10, 10) + 1));
    }

    function getField(categoryName, fieldName) {
        return document.getElementById(formId + '-' + categoryName + fieldName.ucfirst());
    }

    function getInputValueFor(categoryName, fieldName) {
        const field = getField(categoryName, fieldName);
        if (field !== null) {
            return field.value;
        } else {
            return '';
        }
    }

    function setTemporaryUrl () {
        const domainName = getField('domain','name').value;
        const serverName = getField('hosting', 'serverName').value;
        const temporaryUrl = getField('hosting', 'temporaryUrl');
        if ( temporaryUrl && temporaryUrl.value && domainName && serverName) {
            temporaryUrl.value = domainName + '.' + serverName + '.sui-inter.net';
        }
    }

    /**
     * Event handler for client first name
     */
    getField('client', 'firstName').addEventListener('focusout', function () {
        const firstName = getField('seo', 'firstName');
        if (firstName.value === '') {
            firstName.value = this.value;
        }
    });

    /**
     * Event handler for client last name
     */
    getField('client', 'lastName').addEventListener('focusout', function () {
        const lastName = getField('seo', 'lastName');
        if (lastName.value === '') {
            lastName.value = this.value;
        }
    });

    /**
     * Event handler for client phone
     */
    getField('client', 'phone').addEventListener('focusout', function () {
        const mobile = getField('seo', 'mobile');
        if (mobile.value === '') {
            mobile.value = this.value;
        }
        const password = getField('seo', 'password');
        if (password.value === '') {
            password.value = getPassword();
        }
    });

    /**
     * Event handler for domain name
     */
    getField('domain', 'name').addEventListener('focusout', function () {
        const domain = this.value;
        const hostingEmail = getField('hosting', 'email1');
        if (hostingEmail.value === '') {
            hostingEmail.value = 'info@' + domain;
        }
        const password = getField('hosting', 'password1');
        if (password.value === '') {
            password.value = getPassword();
        }
        const seoEmail = getField('seo', 'email');
        if (seoEmail.value === '') {
            seoEmail.value = 'google@' + domain;
        }
        setTemporaryUrl();
    });

    /**
     * Event handler for hosting ftp user name
     */
    getField('hosting', 'ftpUserName').addEventListener('focusout', function () {
        const ftpUserName = this.value;
        if (ftpUserName) {
            const userPassword = getField('hosting', 'ftpUserPassword');
            if (userPassword.value === '') {
                userPassword.value = getPassword();
            }
            const dbName = getField('db', 'name');
            if (dbName.value === '') {
                dbName.value = ftpUserName + '_t3db01';
            }
            const dbUser = getField('db', 'user');
            if (dbUser.value === '') {
                dbUser.value = ftpUserName + '_usr01';
            }
            const dbPassword = getField('db', 'password');
            if (dbPassword.value === '') {
                dbPassword.value = getPassword();
            }
        }
    });

    /**
     * Event handler for hosting server name
     */
    getField('hosting', 'serverName').addEventListener('focusout', function () {
        setTemporaryUrl();
        const hostingServerName = this.value;
        if (hostingServerName !== '') {
            const agencyRef = getField('constious', 'agencyRef');
            if (agencyRef.value === '') {
                agencyRef.value = hostingServerName.split('.')[0];
            }
        }
    });

    /**
     * Event handler for hosting email 1
     */
    getField('hosting', 'email1').addEventListener('focusout', function () {
        const email = this.value;
        const password = getField('hosting', 'password1');
        if (email !== '' && password.value === '') {
            password.value = getPassword();
        }
    });

    /**
     * Event handler for hosting email 2
     */
    getField('hosting', 'email2').addEventListener('focusout', function () {
        const email = this.value;
        const password = getField('hosting', 'password2');
        if (email !== '' && password.value === '') {
            password.value = getPassword();
        }
    });

    /**
     * Event handler for hosting email 3
     */
    getField('hosting', 'email3').addEventListener('focusout', function () {
        const email = this.value;
        const password = getField('hosting', 'password3');
        if (email !== '' && password.value !== '') {
            password.value = getPassword();
        }
    });

    /**
     * Event handler for hosting temporary URL
     */
    getField('hosting', 'temporaryUrl').addEventListener('focusout', function () {
        if (this.value === '') {
            setTemporaryUrl();
        }
    });

    /**
     * Event handler for db name
     */
    getField('db', 'name').addEventListener('focusout', function () {
        const name = this.value;
        if ( name === '' ) {
            const ftpUserName = getField('hosting', 'ftpUserName').value;
            this.value = ftpUserName + '_t3db01';
        }
    });

    /**
     * Event handler for db user
     */
    getField('db', 'user').addEventListener('focusout', function () {
        const user = this.value;
        if ( user === '' ) {
            const ftpUserName = getField('hosting', 'ftpUserName').value;
            this.value = ftpUserName + '_usr01';
        }
    });

    /**
     * Event handler for seo email
     */
    getField('seo', 'email').addEventListener('focusout', function () {
        const email = this.value;
        const password = getField('seo', 'password');
        if (email !== '' && password.value !== '') {
            password.value = getPassword();
        }
    });

    /**
     * Event handler for password fields
     */
    form.querySelectorAll('input[data-uc="password"]').forEach(el => el.addEventListener('focusout', function () {
        if (this.value === '') {
            this.value = getPassword();
        }
        if (this.value === ' ') {
            this.value = '';
        }
    }));

    function resetForm() {
        let field = getField('typo3', 'beUser');
        if (field.value === '') {
            field.value = 'admin-' + getPassword(hashidsLower);
        }
        let bePassword = getField('typo3', 'bePassword');
        if (bePassword.value === '') {
            bePassword.value = getPassword();
        }
        field = getField('typo3', 'installToolPassword');
        if (field.value === '') {
            field.value = bePassword.value;
        }
    }

    /**
     * Sets the form data
     */
    function setFormData(data) {
        function initCategory(category) {
            if ( category in data ) {
                Object.keys(data[category]).forEach(function (key) {
                    const field = getField(category, key);
                    field ? field.value = data[category][key] : null;
                });
            }
        }

        initCategory('client');
        initCategory('domain');
        initCategory('hosting');
        initCategory('db');
        initCategory('typo3');
        initCategory('seo');
        initCategory('various');
    }

    /**
     * Convert import data from a legacy format to the actual format.
     */
    function convertLegacyImportData(data) {
        // Hosting data without explicit ftp access (client access to cpanel was used for ftp)
        if (!data.hosting.hasOwnProperty('ftpUserName')) {
            data.hosting.ftpUserName = data.hosting.userName;
            data.hosting.ftpUserPassword = data.hosting.password;
            data.hosting.clientUserName = data.hosting.userName;
            data.hosting.clientUserPassword = data.hosting.password;
            delete data.hosting.userName;
            delete data.hosting.password;
        }
        return data;
    }

    /**
     * Imports json data
     */
    importForm.addEventListener('submit', function (e) {
        e.preventDefault();
        let importData = importForm.querySelector('textarea').value;
        // Removes line breaks
        importData = importData.replace(/\n+/g, '');
        importData = JSON.parse(importData);
        setFormData(convertLegacyImportData(importData));
        bootstrap.Tab.getInstance(document.getElementById('tab-608')).show();
    });

    /**
     * Creates client sheet
     */
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        data.init();
        sheet.fill(data);
        document.getElementById('uc-clientsheet').style.display = 'block';
    });

    /**
     * Toggle printing from raw data
     */
    document.querySelectorAll('.uc-print-switch').forEach(el => el.addEventListener('click', function () {
        const printSwitch = this;
        const printable = printSwitch.closest('.uc-printable');
        printable.classList.toggle('d-print-none');
        if (printable.classList.contains('d-print-none')) {
            printSwitch.style.textDecoration = 'line-through';
        } else {
            printSwitch.style.textDecoration = 'none';
        }
    }));

    resetForm();

}();