import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XSegment {
    constructor() {
        this.block = false;
        this.fluid = undefined;
        this.compact = false;
        this.align = 'left';
        this.active = '0';
        this.items = [];
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.computeChildItems();
    }
    /**
     * On component will load action
     */
    componentWillLoad() {
        this.computeChildItems();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        if (!this.items.length) {
            return;
        }
        setTimeout(() => {
            if (!this.el.querySelectorAll('x-segment-item.active').length) {
                this.selectItem(this.el.querySelectorAll('x-segment-item').item(0));
            }
        }, 10);
    }
    /**
     * Select the segment and set as active
     *
     * @param index
     * @param segment
     */
    selectItem(segment) {
        this.el.querySelectorAll('x-segment-item.active').forEach(item => {
            item.setAttribute('active', 'false');
            item.classList.remove('active');
        });
        setTimeout(() => {
            segment.setAttribute('active', 'true');
            segment.classList.add('active');
            this.active = segment.getAttribute('value');
            this.selected.emit(this.active);
        }, 10);
    }
    /**
     * Update the child items and render the result
     */
    computeChildItems() {
        this.items = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-segment-item')
            .map(item => item);
        this.items.forEach((item, index) => {
            if (!item.hasAttribute('value')) {
                item.setAttribute('value', index.toString());
            }
            if (this.active == item.getAttribute('value')) {
                this.selectItem(item);
            }
            item.addEventListener('click', () => {
                this.selectItem(item);
            });
        });
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'b4b8d892824dcd4b1f853296088a0b310202b6fe', class: cls(`segment-${this.align}`, {
                'segment-fluid': this.fluid,
                'segment-block': this.block,
                'segment-compact': this.compact,
            }) }, h("div", { key: '61e4775b5c6f36b0125b901ce85a2f8f0192decf', class: "segment-container" }, h("slot", { key: 'd3511b1ac797aa2fdd9b28e7d5ee42a352193bf5' })));
    }
    static get is() { return "x-segment"; }
    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,
                "defaultValue": "false"
            },
            "fluid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element fluid style"
                },
                "attribute": "fluid",
                "reflect": false
            },
            "compact": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element compant style"
                },
                "attribute": "compact",
                "reflect": false,
                "defaultValue": "false"
            },
            "align": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SegmentAlignType",
                    "resolved": "\"between\" | \"center\" | \"evenly\" | \"left\" | \"right\"",
                    "references": {
                        "SegmentAlignType": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-segment/component.tsx",
                            "id": "src/components/x-segment/component.tsx::SegmentAlignType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element align position segments"
                },
                "attribute": "align",
                "reflect": false,
                "defaultValue": "'left'"
            },
            "active": {
                "type": "any",
                "mutable": true,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element active item key/index"
                },
                "attribute": "active",
                "reflect": true,
                "defaultValue": "'0'"
            }
        };
    }
    static get states() {
        return {
            "items": {}
        };
    }
    static get events() {
        return [{
                "method": "selected",
                "name": "selected",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On select the segment index/key value"
                },
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "handleSlotChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
