export default class BoardMembersModal {
    constructor() {
        this.componentInit();

     
        document.addEventListener('swup:animation:out:end', this.componentDestroy.bind(this));
        document.addEventListener('swup:content:replace', this.componentInit.bind(this));
    }

    componentInit() {
        this.$triggers = $('[data-modal-target]');
        this.$modals = $('.modal');

        if (this.$triggers.length) {
            this.setEvents();
        }
    }

    componentDestroy() {
        if (this.$triggers.length) {
            this.$triggers.off('click');
            this.$triggers = null;
            this.$modals = null;
        }
    }

    setEvents() {
        const self = this;

     
        this.$triggers.on('click', function (e) {
            e.preventDefault();
            const target = $(this).data('modal-target');
            const $modal = $(target);
            if ($modal.length) {
                $modal.css('display', 'flex')
                setTimeout(() => {            
                    $modal.addClass('show'); 
                }, 10); 
            }
        });

        
        
                   
            this.$modals.find('[data-modal-close]').on('click', function () {
                const $modal = $(this).closest('.modal');
                $modal.removeClass('show');
                setTimeout(() => {
                    $modal.css('display','none'); 
                }, 300);
            });

           
            this.$modals.find('.modal__overlay').on('click', function () {
                const $modal = $(this).closest('.modal');
                $modal.removeClass('show');
                setTimeout(() => {
                    $modal.css('display','none'); 
                }, 300);
            });
    }
}
