// The default component class
import { Component } from '../../shared/component.js';

// Swiper.js and all needed modules
import Swiper, {
    Autoplay,
    EffectFade,
    Navigation,
    Pagination,
    Scrollbar
} from 'swiper';

// Check whether reduced motion is enabled locally or globally
import { reducedMotion } from '../../shared/media/index.js';

// Find focusable descendants and toggle an element's tab order
import {
    descendants as getFocusableDescendants,
    toggle as toggleTabOrder,
    remove as removeTabOrder
} from '../../shared/focus.js';

// Provide functionality to all carousels
export class Carousel extends Component {
    constructor({
        prefix = 'cwf',
        carousel = 'carousel',
        wrapper = 'carousel__wrapper',
        slide = 'carousel__slide',
        activeSlide = 'carousel__slide--active',
        nextSlide = 'carousel__slide--next',
        previousSlide = 'carousel__slide--previous',
        visibleSlide = 'carousel__slide--visible',
        scrollbar = 'carousel__scrollbar',
        handle = 'carousel__handle',
        pagination = 'carousel__pagination',
        fraction = 'carousel__fraction',
        number = 'carousel__number',
        currentNumber = 'carousel__number--current',
        totalNumber = 'carousel__number--total',
        dots = 'carousel__dots',
        dot = 'carousel__dot',
        activeDot = 'carousel__dot--active',
        nextButton = 'carousel__button--next',
        prevButton = 'carousel__button--previous',
        disabledButton = 'carousel__button--disabled',
        autoplayButton = 'carousel__button--autoplay',
        playButton = 'carousel__button--play',
        pauseButton = 'carousel__button--pause',
        text = 'carousel__text'
    } = {}) {
        super({
            prefix,
            classes: {
                carousel,
                wrapper,
                slide,
                activeSlide,
                nextSlide,
                previousSlide,
                visibleSlide,
                scrollbar,
                handle,
                pagination,
                fraction,
                number,
                currentNumber,
                totalNumber,
                dots,
                dot,
                activeDot,
                nextButton,
                prevButton,
                disabledButton,
                autoplayButton,
                playButton,
                pauseButton,
                text
            }
        });

        // Setup the default parameters for all configurations
        this.defaultParameters = {
            keyboard: {
                enabled: true
            },
            slideActiveClass: this.classes.activeSlide,
            slideClass: this.classes.slide,
            slideNextClass: this.classes.nextSlide,
            slidePrevClass: this.classes.previousSlide,
            wrapperClass: this.classes.wrapper
        };

        // Bind "this" to the necessary methods
        this.autoplayButtonOnClick = this.autoplayButtonOnClick.bind(this);
        this.pauseAutoplayOnInteraction =
            this.pauseAutoplayOnInteraction.bind(this);
    }

    // Returns a copy of the default parameters
    get parameters() {
        return Object.assign({}, this.defaultParameters);
    }

    // Returns whether reduced motion is enabled locally/globally
    get reducedMotion() {
        return reducedMotion();
    }

    // Setup a carousel module
    module({ reference, modules, selector, key, config, callbacks, ...other }) {
        // First, store a copy of the default parameters
        let parameters = reference.parameters || this.parameters;

        // Next, setup the modules array (it it hasn't been already)...
        if (!parameters.modules) parameters.modules = [];
        // ... and push the provided modules to the corresponding array
        parameters.modules.push(...modules);

        // Next, store the config at the given key in the parameters...
        parameters[key] = config;

        // If a selector has been specified,...
        if (selector) {
            // Next, if the selector is a string, turn it into a map for a single element
            if (typeof selector === 'string') selector = { el: selector };

            // Then, for each element selector,...
            Object.keys(selector).forEach((element) => {
                // ... provide a target element for it
                parameters[key][element] = reference.carousel.querySelector(
                    selector[element]
                );
            });
        }

        // If callbacks have been provided, add them to the parameters
        if (callbacks) reference.callbacks = callbacks;

        // If other parameter settings have been provided, assign them to the parameters
        if (Object.keys(other).length)
            parameters = Object.assign(parameters, other);

        // Finally, add the parameters to the reference (if it doesn't exist)...
        if (!reference.parameters) reference.parameters = parameters;
        // ... and return it
        return reference;
    }

    // Setup a carousel's fade effect module
    fadeEffect(reference) {
        return this.module({
            reference,
            modules: [EffectFade],
            key: 'fadeEffect',
            config: {
                crossFade: true
            },
            effect: 'fade',
            slideVisibleClass: this.classes.visibleSlide
        });
    }

    // Find the associated reference of a given element
    findReferenceOfElement(element) {
        return this.references.find(
            ({ autoplay = {}, carousel, slides, wrapper }) =>
                [autoplay?.button, autoplay?.text, carousel, ...slides, wrapper]
                    .filter(Boolean)
                    .includes(element)
        );
    }

    // Update the autoplay button when functionality is changed
    autoplayButtonUpdate(button, running) {
        // Get the associated reference of the autoplay button...
        const reference = this.findReferenceOfElement(button);
        // ... and if it doesn't exist, do nothing else
        if (!reference) return;

        // Next, grab the autoplay object...
        const { autoplay } = reference;
        // ... and its text from the reference
        const { text } = autoplay;

        // Next, define a text action...
        const action = running ? 'Pause' : 'Play';
        // ... and a message using it
        const message = `${action} the carousel`;

        // Set the button's aria-label and title to the message
        button.dataset.action = action.toLowerCase();
        button.setAttribute('aria-label', message);
        button.title = message;

        // Toggle the play/pause class based on the state
        button.classList.toggle(this.classes.playButton, running);
        button.classList.toggle(this.classes.pauseButton, !running);

        // Set the button text to the action
        text.textContent = action;
    }

    // Control autoplay functionality when the autoplay button is clicked
    autoplayButtonOnClick({ currentTarget: autoplayButton }) {
        // Get the associated reference of the autoplay button...
        const reference = this.findReferenceOfElement(autoplayButton);
        // ... and if it doesn't exist, do nothing else
        if (!reference) return;

        // Get the button's action...
        const { action } = autoplayButton.dataset;
        // ... and start/stop the carousel based on it
        switch (action) {
            case 'play':
                return reference.swiper.autoplay.start();
            case 'pause':
                return reference.swiper.autoplay.stop();
        }
    }

    // Setup the autoplay button functionality
    autoplayButtonFunctionality(reference) {
        // Grab the carousel, swiper, and autoplay from the reference...
        const { carousel, swiper, autoplay = {} } = reference;
        // ... and if the autoplay object doesn't already exist, add it to the reference
        if (!Object.keys(autoplay).length) reference.autoplay = {};

        // Store the button from the reference or grab it...
        const button =
            autoplay?.button ||
            carousel.querySelector(this.selectors.autoplayButton);
        // ... and if doesn't exist, do nothing else
        if (!button) return;

        // Store the button text from the reference or grab it...
        const text =
            autoplay?.text || button.querySelector(this.selectors.text);
        // ... and if it doesn't exist, do nothing else
        if (!text) return;

        // Othwerwise, handle the button's click event to control the carousel functionality
        button[this.listener]('click', this.autoplayButtonOnClick);

        // If the autoplay button hasn't been saved to the reference, save it
        if (!autoplay.button) reference.autoplay.button = button;

        // If the autoplay text hasn't been saved to the reference, save it
        if (!autoplay.text) reference.autoplay.text = text;

        // If the component is stopping, reset the autoplay button and do nothing else
        if (!this.run) return this.autoplayButtonUpdate(button, true);

        // Otherwise, handle autoplay button updates when the carousel starts...
        swiper.on('autoplayStart', () =>
            this.autoplayButtonUpdate.bind(this)(button, true)
        );
        // ... and stops autoplay functionality
        swiper.on('autoplayStop', () =>
            this.autoplayButtonUpdate.bind(this)(button, false)
        );
    }

    // Pause autoplay when the wrapper is hovered
    pauseAutoplayOnInteraction({ currentTarget }) {
        // Grab this current target's associated reference...
        const reference = this.findReferenceOfElement(currentTarget);
        // ... and if doesn't exist, do nothing else
        if (!reference) return;

        // Otherwise, stop autoplay
        return reference.swiper.autoplay.stop();
    }

    // Handle the autoplay wrapper functionality
    autoplayWrapperFunctionality({ wrapper, swiper }) {
        // If no wrapper is found, do nothing
        if (!wrapper) return;

        // When the wrapper is hovered, pause autoplay
        wrapper[this.listener]('mouseenter', this.pauseAutoplayOnInteraction);

        // If unmounting, reset the wrapper's aria-live attribute
        if (!this.run) return wrapper.setAttribute('aria-live', 'off');

        // Update the wrapper's aria-live attribute when autoplay is started...
        swiper.on('autoplayStart', () =>
            wrapper.setAttribute('aria-live', 'off')
        );
        // ... and stopped
        swiper.on('autoplayStop', () =>
            wrapper.setAttribute('aria-live', 'polite')
        );
    }

    // Handle the autoplay slide functionality
    autoplaySlideFunctionality({ slides }) {
        // If no slides are found, do nothing
        if (!slides || !slides.length) return;

        // For each slide,...
        slides.forEach((slide) =>
            // ... pause autoplay when focused
            slide[this.listener]('focus', this.pauseAutoplayOnInteraction)
        );
    }

    // Setup a carousel's autplay module
    autoplay(reference) {
        return this.module({
            reference,
            modules: [Autoplay],
            key: 'autoplay',
            config: {
                delay: 5000
            },
            callbacks: [
                this.autoplayButtonFunctionality,
                this.autoplayWrapperFunctionality,
                this.autoplaySlideFunctionality
            ]
        });
    }

    // Setup a carousel's navigation module
    navigation(reference) {
        return this.module({
            reference,
            modules: [Navigation],
            selector: {
                nextEl: this.selectors.nextButton,
                prevEl: this.selectors.prevButton
            },
            key: 'navigation',
            config: {
                disabledClass: this.classes.disabledButton
            }
        });
    }

    // Render a pagination number
    renderNumber(className, value) {
        // Define an array of classes...
        const classes = [this.classes.number, className];
        // ... and return a span using them and the given value
        return `<span class="${classes.join(' ')}">${value}</span>`;
    }

    // Render the pagination fraction
    renderFraction(current, total) {
        // Define the current...
        const currentNumber = this.renderNumber(
            this.classes.currentNumber,
            current
        );
        // ... and total number
        const totalNumber = this.renderNumber(this.classes.totalNumber, total);

        // Finally, define a label...
        const label = `On slide ${current} of ${total}`;
        // ... and use it to return the fraction with the current/total numbers wrapped
        return `<div aria-label="${label}" class="${this.classes.fraction}">${currentNumber}/${totalNumber}</div>`;
    }

    // Render a pagination dot
    renderDot(active, message, controls) {
        // Define an array of classes...
        const classes = [
            this.classes.dot,
            active ? this.classes.activeDot : false
        ].filter(Boolean);
        // ... and return a button using them, the message, and the controls
        return `<button class="${classes.join(
            ' '
        )}" aria-label="${message}" title="${message}" aria-controls="${controls}"></button>`;
    }

    // Render the pagination dots
    renderDots(reference, current, total) {
        // Define an empty array of dots
        let dots = [];

        // For each dot,...
        for (let number = 1; number <= total; number++) {
            // ... calculate if it's active,...
            const active = number === current;
            // ... it's message,...
            const message = `Go to slide ${number} of ${total}`;
            // ... it's control ID,...
            const controls = reference.wrapper.id;
            // ... and use them to define the dot...
            const dot = this.renderDot(active, message, controls);
            // ... and push it to the dots array
            dots.push(dot);
        }

        // Define a label...
        const label = `On slide ${current} of ${total}`;
        // ... and use it to return the dots wrapped
        return `<div class="${
            this.classes.dots
        }" aria-label="${label}">${dots.join('')}</div>`;
    }

    // Render the custom pagination
    renderCustomPagination(reference, swiper, current, total) {
        // Define the fraction...
        const fraction = this.renderFraction(current, total);
        // ... and dots
        const dots = this.renderDots(reference, current, total);

        // Finally, return the fraction and dots together
        return fraction + dots;
    }

    // Setup a carousel's pagination module
    pagination(reference) {
        return this.module({
            reference,
            modules: [Pagination],
            selector: this.selectors.pagination,
            key: 'pagination',
            config: {
                bulletActiveClass: this.classes.activeDot,
                bulletClass: this.classes.dot,
                clickable: true,
                renderCustom: this.renderCustomPagination.bind(this, reference),
                type: 'custom'
            }
        });
    }

    // Setup a carousel's scrollbar module
    scrollbar(reference) {
        return this.module({
            reference,
            modules: [Scrollbar],
            selector: this.selectors.scrollbar,
            key: 'scrollbar',
            config: {
                dragClass: this.classes.handle,
                draggable: true
            }
        });
    }

    // Return an attribute string based off the run flag
    get attribute() {
        return this.run ? 'setAttribute' : 'removeAttribute';
    }

    // Update a slide's classes and attributes
    slideUpdate(slide, index, slides) {
        slide.classList.toggle(this.classes.slide, this.run);
        slide[this.attribute]('role', 'group');
        slide[this.attribute]('aria-roledescription', 'slide');
        slide[this.attribute]('aria-label', `${index + 1} of ${slides.length}`);
    }

    // Get and setup a carousel's slides
    slides({ carousel, slides: existingSlides }) {
        // Grab the slides...
        const slides =
            existingSlides ||
            Array.from(
                carousel.querySelectorAll(`${this.selectors.wrapper} > *`)
            );
        // ... and for each, update its classes and atrributes
        slides.forEach(this.slideUpdate.bind(this));

        // Finally, return the slides
        return slides;
    }

    // Store references to all carousels
    store() {
        // Attempt to grab all carousels...
        const carousels = Array.from(
            document.querySelectorAll(this.selectors.carousel)
        );
        // ... and if none exist, do nothing else
        if (!carousels.length) return;

        // Otherwise, store the references...
        this.references = carousels.map((carousel) => {
            // Grab the wrapper...
            const wrapper = carousel.querySelector(this.selectors.wrapper);
            // ... and each slide
            const slides = this.slides({ carousel });

            // Store a reference to the carousel as an object
            let reference = { carousel, wrapper, slides };

            // If reduced motion is enabled locally/globally, set up the reference's fade effect
            if (this.reducedMotion) reference = this.fadeEffect(reference);

            // Pull controls from the carousel's dataset
            const { navigation, autoplay } = carousel.dataset;

            // If no controls are specified, return the reference with the scrollbar module
            if (!navigation && !autoplay) return this.scrollbar(reference);

            // Otherwise, set up the reference's pagination, navigation,....
            if (navigation) {
                reference = this.pagination(reference);
                reference = this.navigation(reference);
            }
            // ... and autoplay modules if defined...
            if (autoplay) reference = this.autoplay(reference);
            // ... and return it
            return reference;
        });
    }

    // Update a carousel's slides' and their descendants tab index
    updateSlidesTabIndex({ slides }, { activeIndex = 0 }) {
        // For each slide,...
        return slides.forEach((slide, index) => {
            // ... set the targets as it and its descendants...
            const targets = [slide, ...getFocusableDescendants(slide)];
            // ... and either toggle their tab order or remove it if mounting or not
            return this.run
                ? toggleTabOrder(activeIndex === index, ...targets)
                : removeTabOrder(...targets);
        });
    }

    // Handle the functionality for each carousel
    functionality(run) {
        // For each reference,...
        this.references.forEach((reference) => {
            // Store swiper as an existing or new instance...
            const swiper =
                reference.swiper ||
                new Swiper(reference.carousel, reference.parameters);
            // ... and if it hasn't been saved to the reference, save it
            if (!reference.swiper) reference.swiper = swiper;

            // Update this reference's slides' tab index
            this.updateSlidesTabIndex(reference, swiper);

            // If unmounting, destroy the swiper instance
            if (!run) swiper.destroy(true, true);

            // When the swiper active index changes, update this reference's slides' tab index
            swiper.on(
                'activeIndexChange',
                this.updateSlidesTabIndex.bind(this, reference)
            );

            // If there are no callbacks, do nothing else...
            if (!reference.callbacks || !reference.callbacks.length) return;
            // ... otherwise, run the callbacks
            return reference.callbacks.forEach((callback) =>
                callback.bind(this)(reference)
            );
        });
    }

    // Mount/unmount carousel functionality
    mount(run) {
        super.mount(run);

        // If mounting, store the references
        if (run) this.store();

        // Handle the functionality of each carousel
        this.functionality(run);

        // If unmounting,...
        if (!run) {
            // Reset all slides...
            this.references.forEach(this.slides.bind(this));
            // ... and then the references
            this.references = [];
        }
    }
}