account.js

var isImageMimeType = function (mimeType) {
    return (mimeType || '').trim().toLowerCase().indexOf('image/') === 0;
};

// dynamic account completeness value changer
(function () {
    var blocks = document.querySelectorAll('.cards.account-completeness');
    if (!blocks.length) {
        return;
    }

    var changeAccountCompleteness = function (params) {
        updateAccountCompletenessSection(
            params.percent,
            params.sections.completed,
            params.sections.total
        );
    };

    var sendForm = window.sendForm;
    window.sendForm = function (form, callback, multipart, validationEnable) {
        var middleware = function (response) {
            if (typeof response === 'object' && 'accountCompleteness' in response) {
                changeAccountCompleteness(response.accountCompleteness);
            }

            if (callback) {
                callback.apply(this, arguments);
            }
        };

        return sendForm(form, middleware, multipart, validationEnable);
    }
})();

// fill progress bar
var updateAccountCompletenessSection = (function () {
    var sections = document.querySelectorAll('.account-completeness'),
        updateValues = function () {
            sections.forEach(function (node) {
                var progressBar = node.querySelector('.progress__bar'),
                    percent = node.querySelector('.percent');

                if (!progressBar) {
                    return;
                }else if (!progressBar.parentElement.offsetWidth) {// if element hidden
                    progressBar.style.width = progressBar.getAttribute('data-percent') + '%';
                } else {
                    fillProgressBar(progressBar, percent);
                }
            });
        };

    updateValues();

    return function (completenessPercent, completedSectionsNumber, totalSectionsNumber) {
        sections.forEach(function (node) {
            var progressBar = node.querySelector('.progress__bar');

            progressBar && progressBar.setAttribute('data-percent', completenessPercent);

            [
                [completedSectionsNumber, '.sections-completed'],
                [totalSectionsNumber, '.sections-total'],
            ].forEach(function (item) {
                if (item[0] === undefined) {
                    return;
                }

                var block = node.querySelector(item[1]);
                if (block) {
                    block.textContent = +item[0];
                }
            });
        });

        updateValues();
    };
})();

// agreemnt type checkbox
(function () {
    var form = document.querySelector('.form--agreement');
    if (!form) {
        return;
    }

    form.querySelectorAll('input[type="radio"]').forEach(function (el) {
        if (el.checked) {
            el.parentElement.parentElement.classList.add('active');
        }

        el.addEventListener('change', function () {
            form.querySelectorAll('.form--agreement__checkbox').forEach(function (el) {
                el.classList.remove('active');
            });

            this.parentElement.parentElement.classList.add('active');
        });
    })
})();

// account information
(function () {
    var accountInfo = document.querySelector('.account-information');
    if (!accountInfo) {
        return;
    }

    // one listener for all elements
    var showAccountMembers = function () {
        var formOfMember = accountInfo.querySelector('.form-block-of-member');
        if (formOfMember) {
            formOfMember.style.display = 'block';
        }

        this.style.display = 'none';
    };

    ['.account-information__button', '.edit-information'].forEach(function (selector) {
        var node = accountInfo.querySelector(selector);
        if (!node) {
            return;
        }

        node.addEventListener('click', showAccountMembers);
    });

    new PhoneNumber();
})();

// add couple member
(function () {
    var addMemberLink = document.querySelector('.add-another-member');
    if (!addMemberLink) {
        return;
    }

    addMemberLink.addEventListener('click', function (e) {
        e.preventDefault();

        var url = '/couples-club/account/add-couple-member';
        var memberNumber = document.querySelectorAll('.member-wrapper').length;

        postRequest(url, { 'formNumber': memberNumber }, function (response) {
            if (!response.success) {
                return;
            }

            var newMembersBlock = document.getElementById('new_members_block');
            if (newMembersBlock) {
                newMembersBlock.innerHTML += response.formHTML;
            }

            CustomSelect.init();
        });
    });
})();

// bank account
(function () {
    // form
    var setListenersToForms = function (container, callback) {
        (container || document).querySelectorAll('.bank_account_form').forEach(function (el) {
            sendForm(el, function () {
                if (callback) {
                    callback();
                }

                location.href = location.href;
            });
        });
    };

    setListenersToForms();

    if (!('PopupPage' in window)) {
        return;
    }

    var popupInstance = PopupPage.getInstanceByName('bank-account-popup');
    if (!popupInstance) {
        return;
    }

    var pageData = {
        title: popupInstance.wrapper.querySelector('.popup-content__title').textContent,
        text: popupInstance.wrapper.querySelector('.popup-content__text').outerHTML,
        content: popupInstance.wrapper.querySelectorAll('.tabs-list, .tab-block').map(function (node) {
            return node.outerHTML;
        })
    };

    popupInstance.subscribe('shown', function (container) {
        container.querySelector('.popup-content__title').textContent = pageData.title;
        container.querySelector('.popup-content__text').innerHTML = pageData.text;

        var form = container.querySelector('.popup-page__content-form');
        if (form) {
            form.parentNode.removeChild(form);
        }

        var tabsName = 'bank-account-' + (new Date().getTime() + Math.random());

        var content = document.createElement('div');
        content.setAttribute('data-tabs-name', tabsName);
        content.innerHTML = pageData.content.join('\n')

        container.querySelector('.popup-page__content-wrapper').appendChild(content);

        content.querySelectorAll('.close-popup').forEach(function (node) {
            node.addEventListener('click', function (e) {
                e.preventDefault();

                popupInstance.hide();
            });
        });

        setListenersToForms(container, function () {
            popupInstance.hide();
        });

        if ('Tabs' in window) {
            var tabsInstance = Tabs.getInstanceByName(tabsName);
            if (tabsInstance) {
                tabsInstance.openDefaultTab();
            }
        }
    });
})();

(function () {
    // bank data formatters

    var accountNumberFormatter = getStringFormatter(function (value) {
            return value.replace(/\D+?/g, '');
        }),
        accountNumberListener = function () {
            this.value = accountNumberFormatter(this.value);
        };

    document.querySelectorAll('.bank-account-number').forEach(function (el) {
        el.addEventListener('input', accountNumberListener);
        accountNumberListener.call(el);
    });

    var ibanNumberFormatter = getStringFormatter(),
        ibanNumberListener = function () {
            this.value = ibanNumberFormatter(this.value);
        };

    document.querySelectorAll('.bank-iban-number').forEach(function (el) {
        el.addEventListener('input', ibanNumberListener);
        ibanNumberListener.call(el);
    });
})();

// agreement type
(function () {
    var agreementForm = document.getElementById('agreement-form');
    if (!agreementForm) {
        return;
    }

    sendForm(agreementForm, function (response) {
        if (!response.success) {
            return;
        }

        agreementForm.remove();
        document.querySelector('div.form-block-of-member').innerHTML += response.formHTML;
    });
})();

// profile form
(function () {
    var profile_popup = PopupPage.getInstanceByName('profile-form-popup-page');
    console.log(profile_popup);
    profile_popup.subscribe('shown', function(container) {
        container.querySelectorAll('.profile_form').forEach(function(profile_form) {
            addEvents(profile_form);
        });
    });

    var addEvents = function(profileForm) {
        console.log(profileForm);
        document.addEventListener('click', function(e) {
            if (e.target && e.target.name == 'relationship_type[other]') {
                var repsonalInfo = e.target.closest('.person-info'),
                    relationshipOtherWrapper = repsonalInfo ? repsonalInfo.querySelector('.relationship-other-wrapper') : null;

                if (relationshipOtherWrapper) {
                    relationshipOtherWrapper.style.display = e.target.checked ? 'block' : 'none';
                }
            }
        });

        var countWords = function(text) {
            text = text.replace(/[\s\v\n]+?/gim, ' ');

            var words = text.split(' ').filter(function(word) {
                return word.length > 2;
            });

            return words.length;
        }

        document.addEventListener('keyup', function(e) {
            if (e.target && e.target.name == 'story') {
                var storyWrapper = e.target.closest('.story-wrapper'),
                    minWordsBlock = storyWrapper ? storyWrapper.querySelector('.min-words') : null;

                if (minWordsBlock) {
                    minWordsBlock.textContent = countWords(e.target.value) + '/150 words';
                }
            }
        })

        var submitButton = profileForm.querySelector('.submit-photos__block__button');
        console.log(submitButton);
        if (submitButton) {
            var listener = function () {
                var requiredFields = [].slice.call(
                        profileForm.querySelectorAll('input[type="text"][name], textarea')
                    ),
                    checkboxOther = profileForm.querySelector('input[name="relationship_type[other]"]'),
                    disableSubmitButton = requiredFields.some(function (field) {
                        if (field.name == 'relationship_other' && !checkboxOther.checked)  {
                            return false;
                        }

                        return !field.value.trim().length;
                    });

                if (!disableSubmitButton) {
                    disableSubmitButton = [].every.call(
                        profileForm.querySelectorAll('input[name^="relationship_type"]'),
                        function (checkbox) {
                            return !checkbox.checked;
                        }
                    );
                }

                submitButton.disabled = disableSubmitButton;
            };

            profileForm.addEventListener('input', listener);
            profileForm.addEventListener('change', listener);
            profileForm.addEventListener('change', function() {
                console.log(123);
            });
            profileForm.addEventListener('click', listener);

            listener();
        }

        sendForm(profileForm, function (response) {
            if (!response.success) {
                return;
            }

            var popup = document.getElementById('profile-form').popup;
            if(popup) {
                popup.subscribe('popup-hidden', function() {
                    location.href = location.href;
                });
                popup.hide();
            }
        });
    }

    document.querySelectorAll('.profile_form').forEach(function(profile_form) {
        addEvents(profile_form);
    });
})();

// account completed button
(function () {
    var accCompletedBtn = document.querySelector('.account-completed');
    if (!accCompletedBtn) {
        return;
    }

    accCompletedBtn.addEventListener('click', function (e) {
        e.preventDefault();

        location.href = '/couples-club/submissions-item/submit';
    });
})();

// member IDs and profile photos dropzones
(function () {
    var dropzonePreviewTemplate = document.getElementById('dropzone-preview-template');

    var getDropzoneConfig = (function () {
        var dropzoneConfig = {
            uploadMultiple: true,
            addRemoveLinks: !dropzonePreviewTemplate,
            dictRemoveFile: '<img src="/modules/CouplesClub/template/assets/icons/trash-icon.svg">',
            dictCancelUpload: '<img src="/modules/CouplesClub/template/assets/icons/trash-icon.svg">'
        };

        if (dropzonePreviewTemplate) {
            dropzoneConfig.previewTemplate = dropzonePreviewTemplate.innerHTML;
        }

        return function (el) {
            var config = JSON.parse(JSON.stringify(dropzoneConfig));

            config.init = function () {
                var paramName = el.getAttribute('data-param-name');
                if (paramName) {
                    this.options.paramName = paramName;
                }

                var loadPhotosUrl = el.getAttribute('data-load-photos-url');
                if (!loadPhotosUrl) {
                    return;
                }

                var instance = this;
                getRequest(loadPhotosUrl, function (response) {
                    response.forEach(function (value, key) {
                        var mockFile = {
                            name: value.name,
                            size: value.size
                        };

                        instance.options.addedfile.call(instance, mockFile);
                        instance.options.thumbnail.call(instance, mockFile, value.image);

                        mockFile.previewElement.setAttribute('data-id', value.id);
                    });
                });
            };

            config.removedfile = function (file) {
                var removeUrl = el.getAttribute('data-remove-url'),
                    fileId = file.previewElement.getAttribute('data-id'),
                    remove = function () {
                        file.previewElement.parentNode.removeChild(file.previewElement);
                    };

                if (!removeUrl || !fileId) {
                    return void remove();
                };

                postRequest(removeUrl, { 'id': fileId }, remove);
            };

            return config;
        };
    })();

    var popupsInstances = (function () {
        if (!('PopupPage' in window)) {
            return [];
        }

        var instances = ['submit-photos-popup', 'copies-ids-popup'].reduce(function (res, name) {
            var instance = PopupPage.getInstanceByName(name);
            if (instance) {
                res.push(instance);
            }

            return res;
        }, []);

        instances.forEach(function(instance) {
            var pageData = {
                title: instance.wrapper.querySelector('.popup-content__title').textContent,
                text: instance.wrapper.querySelector('.popup-content__text').outerHTML,
                content: instance.wrapper.querySelectorAll(
                    '.submit-wrapper, .submit-photos-popup__submit-button-wrapper'
                ).map(function (node) {
                    return node.outerHTML;
                })
            };

            instance.subscribe('shown', function (container) {
                container.querySelector('.popup-content__title').textContent = pageData.title;
                container.querySelector('.popup-content__text').innerHTML = pageData.text;

                var content = document.createElement('div');
                content.innerHTML = pageData.content.join('\n')

                container.querySelector('.popup-page__content-wrapper').appendChild(content);
            });
        });

        return instances;
    })();

    // initialize dropzones
    var initializer = function (container) {
        (container || document).querySelectorAll('.dropzone-multiple').forEach(function (el) {
            if (el.__dropZoneInstance !== undefined) {
                return;
            }

            var instance,
                deferredUploading = !!el.getAttribute('data-deferred-uploading'),
                dropzoneConfig = getDropzoneConfig(el);

            dropzoneConfig.autoProcessQueue = !deferredUploading;

            if (!!el.getAttribute('data-upload-only-images')) {
                dropzoneConfig.addedfile = function () {
                    errorMessage.reset();

                    Dropzone.prototype.defaultOptions.addedfile.apply(this, arguments);
                };

                dropzoneConfig.accept = function (file, done) {
                    if (isImageMimeType(file.type)) {
                        done();

                        return;
                    }

                    instance.removeFile(file);

                    errorMessage(
                        el,
                        "Oops! That's the wrong format. Only JPG or PNG files are accepted."
                    ).classList.add('error-message');
                };
            }

            instance = new Dropzone(el, dropzoneConfig);

            el.__dropZoneInstance = instance;

            if (dropzonePreviewTemplate) {
                initRemovingConfirmation(el);
            }
        });
    };

    popupsInstances.forEach(function (instance) {
        instance.subscribe('shown', function (container) {
            initializer(container);

            container.querySelectorAll('.dropzone').forEach(function (node) {
                node.addEventListener('click', function () {
                    this.querySelectorAll('.photo-list.pseudo').forEach(function (confirmWindow) {
                        if (confirmWindow.classList.contains('popup')) {
                            return;
                        }

                        confirmWindow.classList.add('popup');
                        confirmWindow.querySelector('.delete-confirm').classList.add('popup__change-password');
                    });
                });
            });
        })
    });

    initializer();

    var popupInstance = PopupPage.getInstanceByName('submit-photos-popup');
    if (!popupInstance) {
        return;
    }

    popupInstance.subscribe('shown', function (container) {
        var wrapper = container.querySelector('.popup-page__content-wrapper'),
            popup = document.querySelector('[data-popup-target="submit-photos"] .popup__account-page__wrapper');

        if (!wrapper || !popup) {
            return;
        }

        ['validationError', 'successfullyUploaded'].forEach(function (eventName){
            wrapper.addEventListener(eventName, function(e) {
                popup.dispatchEvent(
                    new Event(eventName, { bubbles: true })
                );
            });
        });
    });

})();

// submit photos dropzones events handlers
(function () {
    var popupBlock = document.getElementById('submit-photos');
    if(!popupBlock || !popupBlock.popup) {
        return;
    }

    popupBlock.addEventListener('validationError', function () {
        var errorPopup = document.getElementById('profile-photos-error-message').popup;
        if(errorPopup) {
            errorPopup.show();
        }
    });

    popupBlock.addEventListener('successfullyUploaded', function () {
        location.href = location.href;
    });
})();

// submit copies-ids dropzones events handlers
(function () {
    var popupBlock = document.getElementById('copies-id');
    if (!popupBlock || !popupBlock.popup) {
        return;
    }

    var successfullyUploadedListener = function () {
        var section = document.querySelector('.cards.copies-id');
        if (!section) {
            return;
        }

        section.classList.add('filled-completely');
    };

    popupBlock.addEventListener('successfullyUploaded', function () {
        popupBlock.popup.hide();

        successfullyUploadedListener();
    });

    var updateSaveButtonState = function (container) {
            var saveButton = container.querySelector('#save-document-data');
            if (!saveButton) {
                return;
            }

            var filesTotal = 0,
                filesForUploading = 0,
                allowUpload = true;

            getDropzones(container).forEach(function (instance) {
                var filesToUpload = instance.getQueuedFiles().length,
                    minFiles = +(instance.element.getAttribute('data-min-files') || 0);

                filesTotal += instance.files.length;
                filesForUploading += filesToUpload;

                if (allowUpload && filesToUpload < minFiles) {
                    allowUpload = false;
                }
            });

            saveButton.disabled = !filesForUploading || !allowUpload;
        },
        getDropzones = function (container) {
            return [].reduce.call(
                container.querySelectorAll('.dropzone-multiple'),
                function (result, node) {
                    var instance = node.__dropZoneInstance;
                    if (instance) {
                        result.push(instance);
                    }

                    return result;
                },
                []
            );
        };

    var init = function (container) {
        getDropzones(container).forEach(function (instance) {
            instance.on('addedfile', function (file) {
                if (!isImageMimeType(file.type)) {
                    file.previewElement.classList.add('dz-image-preview');
                };

                setTimeout(function () {
                    updateSaveButtonState(container);
                }, 0);
            });
            instance.on('removedfile', function () {
                updateSaveButtonState(container);
            });
        });
    };

    init(popupBlock);
    updateSaveButtonState(popupBlock);

    var popupPageInstance = PopupPage.getInstanceByName('copies-ids-popup');
    if (!popupPageInstance) {
        return;
    }

    popupPageInstance.subscribe('shown', function (container) {
        init(container);

        container.addEventListener('successfullyUploaded', function () {
            popupPageInstance.hide();

            successfullyUploadedListener();
        });
    });

    var saveCopiesIds = function() {
            var documentFormCount = document.querySelectorAll('.member-document-form').length,
                successfullyFormCount = document.querySelectorAll('.member-document-form.successfully-submitted').length;

            if (documentFormCount != successfullyFormCount) {
                return;
            }

            dropzoneUploadPhotos(document.querySelector('#save-document-data'));
        };

    document.addEventListener('click', function (e) {
        if (e.target.getAttribute('data-action') !== 'save-document-data') {
            return;
        }

        document.querySelectorAll('.member-document-form').forEach(function (form) {
            sendForm(form, function (response) {
                if (response.success) {
                    form.classList.add('successfully-submitted');
                }
                saveCopiesIds();
            });

            form.dispatchEvent(new Event('submit'));
        });
    });
})();

// payout request
(function () {
    var popupWrapper = document.getElementById('payout-request-popup');
    if (!popupWrapper) {
        return;
    }

    var payoutRequestPopup = popupWrapper.popup;

    document.querySelectorAll('.payment-information__payout').forEach(function (node) {
        var button = node.querySelector('button.btn--submit');

        button.addEventListener('click', function (e) {
            e.preventDefault();

            getRequest('/couples-club/submissions/payout-request/', function (response) {
                if (!!response.success && payoutRequestPopup) {
                    payoutRequestPopup.show();

                    node.querySelector('.price span').textContent = 0 + '€';
                    button.disabled = true;
                }
            })
        });
    });

    if (!payoutRequestPopup) {
        return;
    }
})();

// remove member of couple button
(function () {
    var section = document.querySelector('.cards.account-information'),
        confirmationPopup = document.getElementById('couple-member-removing-confirmation'),
        listener = function () {};

    if (!section || !confirmationPopup || !confirmationPopup.popup) {
        return;
    }

    confirmationPopup.popup.subscribe('popup-hidden', function () {
        var confirmButton = confirmationPopup.querySelector('[data-confirm]');
        if (confirmButton) {
            setTimeout(function () {
                confirmButton.removeEventListener('click', listener);
            }, 1);
        }
    });

    section.addEventListener('click', function (e) {
        var target = e.target || e.srcElement;
        if (!target || !target.classList.contains('account-member__remove-button')) {
            target = target.closest('.account-member__remove-button');

            if (!target) {
                return;
            }
        }

        var memberBlock = target.closest('.member-wrapper'),
            requestUrl = target.getAttribute('data-request-url'),
            confirmButton = confirmationPopup.querySelector('[data-confirm]');

        if (!memberBlock || !confirmButton) {
            return;
        }

        listener = function () {
            var removeMemberForm = function () {
                memberBlock.parentNode.removeChild(memberBlock);
            };

            if (!requestUrl) {
                return void removeMemberForm();
            }

            getRequest(requestUrl, function (res) {
                if (!!res.success) {
                    removeMemberForm();
                }
            });
        };

        confirmButton.addEventListener('click', listener);

        confirmationPopup.popup.show();
        confirmationPopup.setAttribute('tabindex', 0);
        confirmationPopup.focus();
    });
})();

(function() {
    var loadPhotos = document.querySelectorAll('.load-photos');

    if (!loadPhotos) {
        return;
    }

    loadPhotos.forEach(function(container) {
        var url = container.getAttribute('data-load-photos-url');

        if (!url) {
            return;
        }

        getRequest(url, function(images) {
            for (var key in images) {
                var image = images[key];
                var img = document.createElement('img');
                img.classList.add('image-item');
                img.src = image['image'];
                container.appendChild(img);
            }
        });
    });
})();