Aquarius.component.define('Frontend/Events', function ($element, options) {
    var defaults = {};

    function Events() {
    }

    Events.prototype = {
        init: function () {
            var self = this;

            this.$element = $element;
            this.options = Aquarius.extend(defaults, options);

            this.modal = $('#event-modal');

            this.events();
        },

        events: function() {
            var self = this;

            $('input[name="today"]').on('change', function(e) {
                const today = new Date();
                const date = today.toISOString()?.split('T')[0];

                if (e.target.checked) {
                    $(`.event-item:not([data-event-day=${date}])`).hide();
                    return;
                }

                $('.event-item').show();
            });

            $('.filter select').on('change', function(e) {
                const value = e.target.value;

                $('.event-item').show();
                //$('input[name="today"]').prop('checked', false);

                if (value === "all") {
                    return;
                }

                if ($(this).attr('name') === 'session_type') {
                    $(`.event-item:not([data-event-type="${value}"])`).hide();

                    if ($('input[name="today"]:checked').length > 0) {
                        self.filterByDate();
                    }
                }

                if ($(this).attr('name') === 'coach') {
                    $(`.event-item:not([data-event-coach="${value}"])`).hide();

                    if ($('input[name="today"]:checked').length > 0) {
                        self.filterByDate();
                    }
                }
            })

            self.$element.on('click', '[data-event-action]', function(e) {
                e.preventDefault();

                const $button = $(this);
                const $eventItem = $button.closest('[data-event-id]');
                const eventId = $eventItem.attr('data-event-id');
                const websiteId = $eventItem.data('website-id');

                self.showModal();

                switch($button.data('event-action')) {
                    case 'resign':
                        self.modal.find('h2').text('Biztos, hogy lemondod az edzést?');
                        self.modal
                            .find('[data-action-btn]')
                            .attr('data-action', 'resign')
                            .attr('data-event', eventId)
                            .attr('data-website', websiteId)
                            .text('Lemondom');
                        break;

                    case 'delete':
                        self.modal.find('h2').text('Biztos, hogy törlöd az edzést?');
                        self.modal
                            .find('[data-action-btn]')
                            .attr('data-action', 'delete')
                            .attr('data-event', eventId)
                            .attr('data-website', websiteId)
                            .text('Törlöm');
                        break;

                    case 'copy':
                        self.modal.find('h2').text('Biztos, hogy másolni szeretnéd a hetet?');
                        self.modal.find('span').text('A másolás 1-2 percig is eltarthat. Kérjük az órarend menüpont alatt másolás előtt győződj meg róla, hogy még nem lett lemásolva a következő hétre az órarend. A gomb megnyomása után várj és az órarend menüpont alatt frissítsd az órarendet, amíg minden hiánytalanul lemásolódik.');
                        self.modal
                            .find('[data-action-btn]')
                            .attr('data-action', 'copy')
                            .attr('data-website', websiteId)
                            .text('Másolás');
                        self.modal.find('button').attr('disabled', false);
                        break;
                    default:
                        break;
                }
            });

            this.modal.find('[data-action-btn]').on('click', function(e) {
                e.preventDefault();

                const $button = $(this);
                const eventId = $(this).attr('data-event');
                const websiteId = $(this).attr('data-website');
                const firstDayOfWeek = $(this).attr('data-week');

                $button.attr('disabled', true);

                switch($button.attr('data-action')) {
                    case 'resign':
                        self.handleUpdate(websiteId, eventId, 2);
                        break;
                    case 'delete':
                        self.handleUpdate(websiteId, eventId, 0);
                        break;
                    case 'copy':
                        self.handleWeekCopy();
                        break;
                    default:
                        break;
                }
            });

            this.modal.find('.modal-backdrop, [data-modal-close]').on('click', () => {
                self.closeModal();
            });

            $('.modal-close').on('click', () => {
                self.closeModal();
            });
        },

        filterByDate: function() {
            const today = new Date();
            const date = today.toISOString()?.split('T')[0];

            $(`.event-item:not([data-event-day=${date}])`).hide();
        },

        handleUpdate: function(websiteId, eventId, eventState) {
            var self = this;

            Aquarius.ajax({
                url: `/api/v1/companies/1053/timetables/${websiteId}/${eventId}`,
                method: 'PATCH',
                data: JSON.stringify({
                    'eventState': eventState,
                }),
                success: function(res) {
                    if (res.isValid) {
                        self.closeModal();
                        location.reload();
                    }
                }
            })
        },

        handleWeekCopy: function() {
            const self = this;

            Aquarius.ajax({
                url: `/hu/week-copy`,
                method: 'POST',
                success: function(res) {
                    if (res.isValid) {
                        this.modal.find('h2').text('A másolás több időbe telhet, kérlek, várj!');
                        this.modal.find('button').hide();

                        location.reload();
                    }
                }
            });
        },

        closeModal: function() {
            this.modal.removeClass('active');
            $('body, html').removeClass('modal-is-active');

            this.modal.find('h2').text('');
            this.modal
                .find('[data-action-btn]')
                .attr('data-action', '')
                .attr('data-event', '')
                .attr('data-website', '')
                .text('');
            this.modal.find('.btn-holder').show();
        },

        showModal: function() {
            this.modal.addClass('active');
            $('body, html').addClass('modal-is-active');
        }
    }

    return Events
})