var mainTag = document.getElementsByClassName('azure-page')[0];

function makePwdToggler(pwd) {
    var checkbox = document.createElement('input');
    checkbox.setAttribute('type', 'checkbox');
    var id = pwd.id + 'toggler';
    checkbox.setAttribute('id', id);

    var label = document.createElement('label');
    label.className = 'show-password__label';
    label.setAttribute('for', id);
    label.appendChild(document.createTextNode('show password'));

    var div = document.createElement('div');
    div.className = 'show-password';
    div.appendChild(checkbox);
    div.appendChild(label);

    pwd.insertAdjacentElement('afterend', div);

    function toggle() {
        if (pwd.type === 'password') {
            pwd.type = 'text';
        } else {
            pwd.type = 'password';
        }
    }
    checkbox.onclick = toggle;

    checkbox.addEventListener('keyup', function (event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            checkbox.click();
        }
    });
}

function setupPwdTogglers() {
    var pwdInputs = document.querySelectorAll('input[type=password]');
    for (var i = 0; i < pwdInputs.length; i++) {
        makePwdToggler(pwdInputs[i]);
    }
}

setupPwdTogglers();

function setPhoneWithCode(code, phone) {
    return code.concat(phone);
}

function combineCountryCodeWithPhone() {
    var countryCodeWrapper = document.getElementsByClassName(
        'TextBox CountryCode'
    )[0];

    var phoneWrapper = document.getElementsByClassName('TextBox Phone')[0];
    var phoneInput = document.querySelectorAll('input[id="nationalNumber"]')[0];

    if (
        countryCodeWrapper !== undefined &&
        phoneWrapper !== undefined &&
        phoneInput !== undefined
    ) {
        var countryCodeInput = countryCodeWrapper.querySelectorAll('input')[0];
        var phone = phoneWrapper.getElementsByClassName('attrEntry')[0];
        var phoneLabel = phoneWrapper.querySelectorAll(
            'label[for="nationalNumber"]'
        )[0];
        var phoneTopLabel = document.querySelectorAll(
            'label[for="yourPhoneNumber"]'
        )[0];

        if (phoneLabel !== undefined && phoneLabel !== null) {
            phoneLabel.remove();
        }

        if (phoneTopLabel !== undefined && phoneTopLabel !== null) {
            phoneTopLabel.setAttribute('for', 'nationalNumber');
        }

        if (phone !== undefined) {
            phoneInput.setAttribute('autocomplete', 'off');
            phoneInput.setAttribute('tabindex', '-1');

            phone.classList.add('phone-number-without-country-code');
            countryCodeWrapper.classList.add('CountryCode_with-phone');
            countryCodeWrapper.appendChild(phone);
            countryCodeInput.setAttribute('autocomplete', 'tel-country-code');

            countryCodeInput.addEventListener('input', function () {
                var countryCodeValue = this.value;
                var firstCharacterOfValue = countryCodeValue.charAt(0);

                if (firstCharacterOfValue === '+') {
                    countryCodeInput.value = countryCodeValue;
                } else {
                    countryCodeInput.value = '+' + countryCodeValue;
                }
            });
        }
    }
}
combineCountryCodeWithPhone();

function verificationInfoTextMoving() {
    var verificationInfoText = document.getElementsByClassName(
        'verificationInfoText'
    )[0];
    var sectionLabel = document.querySelectorAll('label[for=yourNewUser]')[0];

    if (
        verificationInfoText !== undefined &&
        verificationInfoText !== null &&
        sectionLabel !== undefined &&
        sectionLabel !== null
    ) {
        sectionLabel.after(verificationInfoText);
    }
}

verificationInfoTextMoving();

function linkToMainSite() {
    var CheckboxMultiSelect = document.getElementsByClassName(
        'CheckboxMultiSelect'
    )[0];

    if (CheckboxMultiSelect !== undefined) {
        var checkboxWrapper = CheckboxMultiSelect.getElementsByClassName(
            'attrEntry'
        )[0];

        if (checkboxWrapper !== undefined) {
            var linkToMainSite = document.getElementsByClassName(
                'link-to-main-site'
            )[0];
            var labelOfTheFirstCheckbox = checkboxWrapper.querySelectorAll(
                'label'
            )[1];

            if (
                linkToMainSite === undefined ||
                (linkToMainSite === null &&
                    labelOfTheFirstCheckbox !== undefined &&
                    labelOfTheFirstCheckbox !== null)
            ) {
                var link = document.createElement('a');
                var linkText = 'personvernserklæring';
                var linkUrl;

                if (mainTag !== undefined) {
                    linkText = mainTag.getAttribute('data-privacy-policy-link-text');
                    linkUrl = mainTag.getAttribute('data-privacy-policy-link');
                }
                link.className = 'link-to-main-site';
                link.setAttribute('href', linkUrl);
                link.setAttribute('target', '_blank');
                link.appendChild(document.createTextNode(linkText));

                labelOfTheFirstCheckbox.after(link);
            }
        }
    }
}

linkToMainSite();

function hasSomeParentTheClass(element, classname) {
    if (element) {
        if (element.className.split(' ').indexOf(classname) >= 0) return true;
        return (
            element.parentNode && hasSomeParentTheClass(element.parentNode, classname)
        );
    } else {
        return false;
    }
}

function passwordDescription() {
    var newPasswordInput = document.getElementById('newPassword');

    if (
        newPasswordInput !== undefined &&
        mainTag !== undefined &&
        hasSomeParentTheClass(newPasswordInput, 'attrEntry')
    ) {
        var passwordDescriptionText = mainTag.getAttribute(
            'data-password-description'
        );
        var passwordWrapper = newPasswordInput.closest('.attrEntry');
        var passwordDescription = document.createElement('div');
        passwordDescription.className = 'password-description';
        passwordDescription.appendChild(
            document.createTextNode(passwordDescriptionText)
        );

        if (passwordWrapper !== undefined) {
            passwordWrapper.appendChild(passwordDescription);
        }
    }
}

passwordDescription();

function combinePostCodeAndAddress() {
    var postCodeInput = document.getElementById('postalCode');
    var city = document.getElementById('city');

    if (
        postCodeInput !== undefined &&
        city !== undefined &&
        hasSomeParentTheClass(postCodeInput, 'TextBox') &&
        hasSomeParentTheClass(city, 'TextBox')
    ) {
        var postCodeInputWrapper = postCodeInput.closest('.TextBox');
        var parent = postCodeInputWrapper.parentNode;
        var cityWrapper = city.closest('.TextBox');
        var postWrapper = document.createElement('li');
        var newPostCodeWrapper = document.createElement('div');
        var newPostCodeWrapperContent = postCodeInputWrapper.innerHTML;
        var newCityWrapper = document.createElement('div');
        var newCityWrapperContent = cityWrapper.innerHTML;

        newPostCodeWrapper.innerHTML = newPostCodeWrapperContent;
        newPostCodeWrapper.className = 'post-wrapper__post-code';
        newCityWrapper.innerHTML = newCityWrapperContent;
        newCityWrapper.className = 'post-wrapper__city';

        postWrapper.className = 'post-wrapper';
        parent.insertBefore(postWrapper, postCodeInputWrapper);
        postWrapper.appendChild(newPostCodeWrapper);
        postWrapper.appendChild(newCityWrapper);

        cityWrapper.remove();
        postCodeInputWrapper.remove();
    }
}

combinePostCodeAndAddress();

function moveDownVipps() {
    var socialButtons = document.getElementsByClassName(
        'claims-provider-list-buttons '
    )[0];

    if (socialButtons !== undefined) {
        var root = document.getElementById('api');
        root.className = 'flex-column-container';
    }
}

moveDownVipps();

function loginPhone() {
    var phoneInput = document.getElementById('phoneNumber');

    if (
        phoneInput !== undefined &&
        hasSomeParentTheClass(phoneInput, 'entry-item') &&
        hasSomeParentTheClass(phoneInput, 'entry')
    ) {
        var phone = phoneInput.closest('.entry-item');
        phone.classList.add('visually-hidden');

        var codeAndPhoneWrapper = document.createElement('div');
        codeAndPhoneWrapper.className = 'CountryCode_with-phone';

        var parent = phone.parentNode;

        //Phone code
        var newPhoneId = 'nationalNumberInput';
        var newPhoneInput = phoneInput.cloneNode(true);
        newPhoneInput.setAttribute('id', newPhoneId);
        newPhoneInput.setAttribute('autocomplete', 'tel-national');
        newPhoneInput.setAttribute('tabindex', '0');

        //Phone label
        var newPhoneLabel = document.createElement('label');
        newPhoneLabel.setAttribute('for', newPhoneId);
        newPhoneLabel.appendChild(document.createTextNode('Telefonnummer'));

        //country code
        var newCountryCodeId = 'countryCodeInput';
        var newCountryCodeLabel = document.createElement('label');
        var newCountryCodeInput = document.createElement('input');
        var newCountryCodeLabelText = mainTag.getAttribute(
            'data-country-code-label'
        )
            ? mainTag.getAttribute('data-country-code-label')
            : 'Country code';
        newCountryCodeLabel.setAttribute('for', newCountryCodeId);
        newCountryCodeLabel.setAttribute('class', 'country-code-label');
        newCountryCodeLabel.innerHTML += newCountryCodeLabelText;

        newCountryCodeInput.setAttribute('id', newCountryCodeId);
        newCountryCodeInput.setAttribute('autocomplete', 'tel-country-code');
        newCountryCodeInput.setAttribute('type', 'text');
        newCountryCodeInput.setAttribute('value', '+47');
        newCountryCodeInput.setAttribute('placeholder', 'Landskode');
        newCountryCodeInput.setAttribute('title', 'Vennligst fyll inn landskode');
        newCountryCodeInput.setAttribute('tabindex', '0');

        codeAndPhoneWrapper.appendChild(newPhoneLabel);
        codeAndPhoneWrapper.appendChild(newCountryCodeLabel);
        codeAndPhoneWrapper.appendChild(newCountryCodeInput);
        codeAndPhoneWrapper.appendChild(newPhoneInput);

        phoneInput.setAttribute('autocomplete', 'off');
        phoneInput.setAttribute('tabindex', '-1');

        parent.insertBefore(codeAndPhoneWrapper, phone);
        parent.insertBefore(newPhoneLabel, codeAndPhoneWrapper);

        var countryCode = newCountryCodeInput.value;
        var phoneNumber = newPhoneInput.value;

        phoneInput.value = setPhoneWithCode(countryCode, phoneNumber);

        newCountryCodeInput.addEventListener('input', function () {
            var countryCodeValue = this.value;
            var firstCharacterOfValue = countryCodeValue.charAt(0);

            if (firstCharacterOfValue === '+') {
                countryCode = countryCodeValue;
            } else {
                countryCode = '+' + countryCodeValue;
                newCountryCodeInput.value = '+' + countryCodeValue;
            }
            phoneInput.value = setPhoneWithCode(countryCode, phoneNumber);
        });

        newPhoneInput.addEventListener('input', function () {
            phoneNumber = this.value;
            phoneInput.value = setPhoneWithCode(countryCode, phoneNumber);
        });

        setPhoneWithCode(countryCode, phoneNumber);
    }
}
loginPhone();

//Setting headings

function headingSetting() {
    var pageHeading = document.getElementsByClassName('azure-page__heading')[0];
    var loginHeading = mainTag.getAttribute('data-login-heading');
    var registrationHeading = mainTag.getAttribute('data-registration-heading');
    var loginForm = document.getElementById('localAccountForm');
    var registrationForm = document.getElementById('attributeVerification');

    if (
        loginForm !== null &&
        loginForm !== undefined &&
        pageHeading !== undefined
    ) {
        pageHeading.innerHTML = loginHeading;
    }

    if (
        registrationForm !== null &&
        registrationForm !== undefined &&
        pageHeading !== undefined
    ) {
        pageHeading.innerHTML = registrationHeading;
    }
}

headingSetting();

//change text "Sign up now"

function changeSignUpText() {
    var signUpLink = document.getElementById('SignUpWithPhoneAndPassword');
    var signUpLinkText = mainTag.getAttribute('data-sign-up-link-text');

    if (
        signUpLink !== undefined &&
        signUpLink !== null &&
        signUpLinkText !== null
    ) {
        signUpLink.innerHTML = signUpLinkText;
    }
}
changeSignUpText();

function colorOfContinueButton() {
    var verificationCodeInput = document.querySelectorAll(
        'button.verifyCode[aria-hidden=false]'
    )[0];
    var continueButton = document.getElementById('continue');

    if (
        verificationCodeInput !== undefined &&
        verificationCodeInput !== null &&
        continueButton !== undefined &&
        continueButton !== null
    ) {
        continueButton.classList.add('btn-secondary');
    }
}

colorOfContinueButton();

function moveVerificationErrorToPhoneLabel() {
    var verificationErrorWrapper = document.querySelectorAll(
        '.verificationErrorTest'
    )[0];

    var countryCodeWrapper = document.querySelectorAll(
        '.CountryCode_with-phone'
    )[0];

    if (
        countryCodeWrapper !== undefined &&
        verificationErrorWrapper !== undefined
    ) {
        var newVerificationErrorWrapper = document.createElement('li');
        var parent = countryCodeWrapper.parentNode;

        newVerificationErrorWrapper.appendChild(verificationErrorWrapper);
        parent.insertBefore(newVerificationErrorWrapper, countryCodeWrapper);
    }
}

moveVerificationErrorToPhoneLabel();

function changeTabIndex() {
    var focusable = document.querySelectorAll(
        '[tabindex]:not([tabindex="-1"]), #countryCode, #nationalNumber'
    );
    var hiddenLink = document.querySelectorAll('.helpLink, p, div');

    for (var i = 0; i < focusable.length; i++) {
        focusable[i].setAttribute('tabindex', '0');
    }

    for (var l = 0; l < hiddenLink.length; l++) {
        hiddenLink[l].setAttribute('tabindex', '-1');
    }
}
changeTabIndex();

function forgotPasswordMoving() {
    var forgotPassword = document.getElementById('forgotPassword');
    var password = document.getElementsByClassName('show-password')[0];

    if (
        forgotPassword !== undefined &&
        forgotPassword !== null &&
        password !== undefined &&
        password !== null
    ) {
        password.after(forgotPassword);
    }
}

forgotPasswordMoving();

function trackVippsLogin() {
    if (window.dataLayer) {
        window.dataLayer.push({
            event: 'login',
            loginMethodAttempt: 'vipps',
            loginSuccessful: true,
            loginError: null
        });
    }
}

function VippsMoving() {
    var vippsButton = document.getElementById('VippsExchange');

    if (vippsButton !== undefined && vippsButton !== null) {
        var vippsButtonParent = vippsButton.closest(
            '.claims-provider-list-buttons'
        );
        var parent = vippsButton.closest('#api');
        vippsButton.onclick = trackVippsLogin;

        if (
            parent !== undefined &&
            parent !== null &&
            vippsButtonParent !== undefined &&
            vippsButtonParent !== null
        ) {
            parent.appendChild(vippsButtonParent);
        }
    }
}

VippsMoving();

//Help link
function createHelpLink() {
    var container = document.getElementsByClassName(
        'azure-page__container-inner'
    )[0];
    var linkText = 'Hjelp';

    if (mainTag !== undefined && mainTag.hasAttribute('data-help-link-text')) {
        linkText = mainTag.getAttribute('data-help-link-text');
    }

    if (container !== undefined) {
        var helpLinkContainer = document.createElement('div');
        helpLinkContainer.className = 'azure-page__help-link-container';

        var helpLink = document.createElement('a');
        helpLink.className = 'azure-page__help-link';
        helpLink.setAttribute(
            'href',
            'https://www.usbl.no/om-oss/kontakt/ofte-stilte-sporsmal'
        );
        helpLink.setAttribute('target', '_blank');
        helpLink.innerHTML += linkText;

        helpLinkContainer.appendChild(helpLink);
        container.appendChild(helpLinkContainer);
    }
}

//createHelpLink();