define([
    'uiComponent',
    'jquery',
    'Magento_Ui/js/modal/modal',
], function (Component, $) {
    'use strict';

    return Component.extend({
        initialize: function (config) {
            const self = this;

            $('[data-trigger=' + config.modalTrigger + ']').click(function (event) {
                // change product name
                if ($(config.modalSelector + " [name='productName']").length) {
                    $(config.modalSelector + " [name='productName']")[0].value = config.sku;
                }
                // change modal title
                if ($(config.formSelector).closest(".modal-popup").length) {
                    $(config.formSelector).closest(".modal-popup").find(".modal-title")[0].innerHTML = config.title;
                }
                $(config.modalSelector).modal({
                    type: 'popup',
                    responsive: true,
                    innerScroll: true,
                    title: config.title,
                    buttons: [{
                        text: $.mage.__('Submit'),
                        class: 'action',
                        click: function () {
                            self.handleSubmit(config);
                        }
                    }]
                }).modal("openModal");
            });
        },
        scrollToElement: function ($target, $container) {
            $container.scrollTop($target.position().top);
        },
        /**
         * Determine scroll container
         * Container will be modal for smaller windows, or inner div for larger
         * @param {jQuery} $form Form element in container
         */
        getScrollContainer: function ($form) {
            // first we look at modal-content
            // if this has a max-height, we are in dialog mode
            const $modalContent = $form.closest('.modal-content');
            if ($modalContent.css('max-height')) {
                return $modalContent;
            } else {
                // if not, we are in sheet mode and find the aside parent
                return $form.closest('aside');
            }
        },
        handleValidationFail: function (config) {
            const $form = $(config.formSelector);
            const validationResult = $form.validate();
            if (validationResult.errorList[0] && validationResult.errorList[0].element) {
                this.scrollToElement($(validationResult.errorList[0].element).parent(), this.getScrollContainer($form));
            }
        },
        handleValidationSuccess: function (config) {
            $.ajax({
                showLoader: true,
                url: config.ajaxUrl,
                data: $(config.formSelector).serialize(),
                type: 'POST',
                dataType: 'json'
            }).done(function (data) {
                $(config.modalSelector).modal('closeModal');

                if (!data) {
                    console.error('Data is undefined')
                } else {
                    $(config.formSelector)[0].reset();
                }
            });
        },
        handleSubmit: function (config) {
            if ($(config.formSelector).valid()) {
                this.handleValidationSuccess(config);
            } else {
                this.handleValidationFail(config);
            }
        }
    });
});