define([
    '../../core/utils/data',
    '../../core/utils/helper',
    '../../core/utils/method',
    '../../core/models/index'
], (data, helper, method, model) => {
    (function ($) {
        new method('ripple', {
            init: function (element) {
                const context = this;

                const options = context.local._options;

                return element.each(function () {
                    const $child = $(this);

                    $child.addClass('btn-ripple');
                    if ($.inArray(options.theme, options.supportThemes) !== -1) {
                        $child.addClass('btn-ripple-' + options.theme);
                    }

                    context.$helper.bind($child, 'click', function (event) {
                        if (event.originalEvent && options.passive === true) {
                            return false;
                        }

                        const $this = $(this);
                        if (!$this.hasClass('btn-ripple')) {
                            $child.addClass('btn-ripple');
                            if ($.inArray(options.theme, options.supportThemes) !== -1) {
                                $child.addClass('btn-ripple-' + options.theme);
                            }
                        }
                        const offset = this.getClientRects()[0] || {left: 0, top: 0};
                        const $ripple = $(context.$helper.parseTemplate('effect'));
                        const size = Math.min($this.width(), $this.height());
                        const scale = Math.max($this.width(), $this.height()) / size * 2;
                        let point = {
                            x: 0,
                            y: 0
                        };

                        if (
                            typeof event.x !== 'undefined' &&
                            typeof event.y !== 'undefined'
                        ) {
                            point = {
                                x: event.x - size / 2,
                                y: event.y - size / 2
                            };
                        }
                        else {
                            point = {
                                x: (event.clientX - offset.left) - size / 2,
                                y: (event.clientY - offset.top) - size / 2
                            };
                        }

                        if (options.over === true) {
                            $child.css({
                                overflow: 'visible'
                            });
                        }

                        $ripple.css({ width: size, height: size, left: point.x, top: point.y });
                        $ripple.appendTo($this);
                        $this.addClass('btn-ripple-start');
                        context.$helper.promise(() => {
                            $ripple.css({
                                transform: 'scale(' + scale + ')',
                                opacity: 1
                            });

                            context.$helper.promise(() => {                            
                                $ripple.addClass('anim-end').css({
                                    opacity: 0 
                                });

                                context.$helper.promise(() => {
                                    $ripple.remove();
                                    $this.removeClass('btn-ripple-start');
                                }, 500);
                            }, 150);
                        }, 50);
                    });
                });
            },
            method: {
                start: function (element, value) {
                    const context = this;

                    if (!value) {
                        value = {
                            x: element.width() / 2,
                            y: element.height() / 2
                        };
                    }

                    context.$helper.triggerHandler(element, 'click', value);
                }
            },
            template: {
                effect: `<div class="btn-ripple-effect"></div>`
            },
            options: {
                once: true,
                supportThemes: [
                    'light',
                    'dark'
                ],
                over: false,
                passive: false
            }
        });
    }(jQuery));
});