import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XTimeline {
    constructor() {
        /**
         * Element has not empty collapse slot
         */
        this.hasCollapseSlot = false;
        this.color = undefined;
        this.accent = undefined;
        this.time = undefined;
        this.meta = undefined;
    }
    /**
     * On component will be loaded hook
     */
    componentWillLoad() {
        this.hasCollapseSlot = !!this.el.querySelector('[slot="collapse"]');
    }
    /**
     * Parse the time value to visible format
     */
    parseTime(datetime) {
        const match = datetime.match(/(\d+:)/g);
        const minutes = parseInt(match[1]) || 0;
        const hours = parseInt(match[0]) || 0;
        const hour = hours === 0 ? 12 : hours;
        const clock = hours >= 12 ? 'PM' : 'AM';
        const formattedHours = hours > 12 ? hours - 12 : hour;
        return `${formattedHours}:${minutes.toString().padStart(2, '0')} <small>${clock}</small>`;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'c24396cb7435bb78bd8842a1bbdb2f3fa632d147', class: cls(`timeline-color-${this.color}`, { 'timeline-bullet-accent': this.accent }) }, this.time && h("div", { key: '2901c518c36ea8eb04fa7a855f7c5e94985cc137', class: "timeline-item-time", innerHTML: this.parseTime(this.time) }), h("div", { key: '802c3fd0d1721436891249bf080614ba98ae48af', class: "timeline-item-bullet" }), h("div", { key: 'bdaf98d9ef65f79e48cd9ccbc07ff9c7b56a1842', class: "timeline-item-body" }, this.hasCollapseSlot && h("x-collapse", { key: '6cb119bb5b88b97ca2fbe8a29dd5704ca96c9225' }, h("div", { key: '8cae60d17bb1275e53a24870e8e8e8369fb2611b', class: "timeline-item-header", slot: "header" }, h("div", { key: '417b004c89fb47bfb0677816be8ea8fa574e1b04', class: "timeline-item-text" }, h("slot", { key: '7d72cb386b35ad45f890a70d02a875595fe8fd80' })), this.meta && h("div", { key: '27f047f0fd5906299a6790ed3f45eabf5cd3eb58', class: "timeline-item-meta", innerHTML: this.meta })), h("div", { key: '69c0967ed62891a53fb406465af9f598dc65acd5', class: "timeline-item-colapse" }, h("slot", { key: '9ae0f0a50cdd31063c479178a840e925c1a63ede', name: "collapse" }))), !this.hasCollapseSlot && h("div", { key: 'c9fd5f711469e1144c792a9c597398e2f4972c89', class: "timeline-item-header" }, h("div", { key: '3c7f59fc4942bcb36a86b72677ab9881e9af4e41', class: "timeline-item-text" }, h("slot", { key: '345f17f0e228f5c472cd79a095cf2d34789f2514' })), this.meta && h("div", { key: 'd5f9d5ac16a89d9bad0679bff622eda49e19d3b3', class: "timeline-item-meta", innerHTML: this.meta }))));
    }
    static get is() { return "x-timeline-item"; }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ColorType",
                    "resolved": "\"accent\" | \"blue\" | \"brown\" | \"cyan\" | \"danger\" | \"default\" | \"green\" | \"indigo\" | \"info\" | \"orange\" | \"pink\" | \"primary\" | \"purple\" | \"red\" | \"stone\" | \"success\" | \"teal\" | \"warning\" | \"yellow\"",
                    "references": {
                        "ColorType": {
                            "location": "import",
                            "path": "../../constants/colors",
                            "id": "src/constants/colors.ts::ColorType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element color name"
                },
                "attribute": "color",
                "reflect": false
            },
            "accent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element accent checkpoint"
                },
                "attribute": "accent",
                "reflect": false
            },
            "time": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element time format"
                },
                "attribute": "time",
                "reflect": false
            },
            "meta": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element meta text showing right"
                },
                "attribute": "meta",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
