/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import Flickity from "./flickity";
import { Unipointer } from "./utils/gestures";
import { utils } from "./utils/utils";
export default () => {
    // -------------------------- PrevNextButton -------------------------- //
    function PrevNextButton(direction, parent) {
        this.direction = direction;
        this.parent = parent;
        this.parentElement = this.parent.element.shadowRoot || this.parent.element;
        this._create();
    }
    PrevNextButton.prototype = Object.create(Unipointer.prototype);
    PrevNextButton.prototype._create = function () {
        // properties
        this.isEnabled = true;
        this.isPrevious = this.direction == -1;
        const leftDirection = this.parent.options.rightToLeft ? 1 : -1;
        this.isLeft = this.direction == leftDirection;
        const button = (this.element = document.createElement('button'));
        button.className = 'flickity-button flickity-prev-next-button';
        if (this.isPrevious) {
            button.classList.add('previous');
            button.setAttribute('part', 'navigation-button navigation-button--previous');
        }
        else {
            button.classList.add('next');
            button.setAttribute('part', 'navigation-button navigation-button--next');
        }
        // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
        button.setAttribute('type', 'button');
        // init as disabled
        this.disable();
        button.setAttribute('aria-label', this.isPrevious ? 'Previous' : 'Next');
        const slot = document.createElement('slot');
        slot.name = this.isPrevious ? 'previous-icon' : 'next-icon';
        button.appendChild(slot);
        slot.addEventListener('slotchange', () => {
            slot.assignedElements({ flatten: true }).forEach((ele) => {
                ele.removeAttribute('hidden');
            });
        });
        // create arrow
        const icon = document.createElement('span');
        icon.className =
            'button-icon ' +
                (this.isPrevious ? 'button-icon--previous' : 'button-icon--next');
        icon.setAttribute('part', 'navigation-icon');
        slot.appendChild(icon);
        // events
        this.parent.on('select', this.update.bind(this));
        this.on('pointerDown', this.parent.childUIPointerDown.bind(this.parent));
    };
    PrevNextButton.prototype.activate = function () {
        this.bindStartEvent(this.element);
        this.element.addEventListener('click', this);
        // add to DOM
        this.parentElement.appendChild(this.element);
    };
    PrevNextButton.prototype.deactivate = function () {
        // remove from DOM
        this.parentElement.removeChild(this.element);
        // click events
        this.unbindStartEvent(this.element);
        this.element.removeEventListener('click', this);
    };
    PrevNextButton.prototype.handleEvent = utils.handleEvent;
    PrevNextButton.prototype.onclick = function () {
        if (!this.isEnabled) {
            return;
        }
        this.parent.uiChange();
        const method = this.isPrevious ? 'previous' : 'next';
        this.parent[method]();
    };
    // -----  ----- //
    PrevNextButton.prototype.enable = function () {
        if (this.isEnabled) {
            return;
        }
        this.element.disabled = false;
        this.isEnabled = true;
    };
    PrevNextButton.prototype.disable = function () {
        if (!this.isEnabled) {
            return;
        }
        this.element.disabled = true;
        this.isEnabled = false;
    };
    PrevNextButton.prototype.update = function () {
        // index of first or last slide, if previous or next
        const slides = this.parent.slides;
        // enable is wrapAround and at least 2 slides
        if (this.parent.options.wrapAround && slides.length > 1) {
            this.enable();
            return;
        }
        const lastIndex = slides.length ? slides.length - 1 : 0;
        const boundIndex = this.isPrevious ? 0 : lastIndex;
        const method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable';
        this[method]();
    };
    PrevNextButton.prototype.destroy = function () {
        this.deactivate();
        this.allOff();
    };
    // -------------------------- Flickity prototype -------------------------- //
    utils.extend(Flickity.defaults, {
        prevNextButtons: true,
        arrowShape: {
            x0: 10,
            x1: 60,
            y1: 50,
            x2: 70,
            y2: 40,
            x3: 30,
        },
    });
    Flickity.createMethods.push('_createPrevNextButtons');
    const proto = Flickity.prototype;
    proto._createPrevNextButtons = function () {
        if (!this.options.prevNextButtons) {
            return;
        }
        this.prevButton = new PrevNextButton(-1, this);
        this.nextButton = new PrevNextButton(1, this);
        this.on('activate', this.activatePrevNextButtons);
    };
    proto.activatePrevNextButtons = function () {
        this.prevButton.activate();
        this.nextButton.activate();
        this.on('deactivate', this.deactivatePrevNextButtons);
    };
    proto.deactivatePrevNextButtons = function () {
        this.prevButton.deactivate();
        this.nextButton.deactivate();
        this.off('deactivate', this.deactivatePrevNextButtons);
    };
    // @ts-ignore
    Flickity.PrevNextButton = PrevNextButton;
};
