import { h, Host } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XDockSwitch {
    constructor() {
        this.block = undefined;
        this.activeItem = undefined;
    }
    /**
     * Listen for switch element
     */
    handleSwitch(ev) {
        if (this.activeItem) {
            this.activeItem.active = false;
            this.activeItem.classList.remove('active');
        }
        this.selectItem(ev.detail);
    }
    /**
     * On component loaded action
     */
    componentDidLoad() {
        const query = this.el.querySelectorAll('x-dock-item');
        const items = Array.from(query);
        const active = items.find(item => item.active) || items.shift();
        active && setTimeout(() => this.selectItem(active), 500);
        window.addEventListener('resize', () => {
            this.activeItem && this.selectItem(this.activeItem);
        });
    }
    /**
     * Select the item and activate
     */
    selectItem(item) {
        this.activeItem = item;
        this.activeItem.classList.add('active');
        const leftPadding = parseFloat(getComputedStyle(this.slider).left);
        this.slider.style.animation = '';
        this.slider.style.width = `${this.activeItem.offsetWidth}px`;
        this.slider.style.translate = `${this.activeItem.offsetLeft - leftPadding}px 0`;
        this.slider.style.animation = 'scaleToggle 440ms ease';
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '24dfc4648031ceb6cbb24aa02424fea331a10492', class: cls({ 'block': this.block }) }, h("slot", { key: '3c3fbea7676fba7e0f30c409dc372c56cc39c15f' }), h("div", { key: '92d60356f16ebd61a310965fd7d3f80327b6a4f0', ref: el => this.slider = el, class: "switch-slider" }));
    }
    static get is() { return "x-dock-switch"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "block": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element block style"
                },
                "attribute": "block",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "activeItem": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "switch",
                "method": "handleSwitch",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
