import { h } from "@stencil/core";
export class PieStimulusLayout {
    constructor() {
        // shows if resizing is activated or not
        this.allowedResize = false;
        // shows if user is currently resizing the component,
        this.isResizing = false;
        // the initial X-coordinate of the mouse cursor.
        this.initialX = 0;
        //  flex values of the left component
        this.initialLeftFlex = 0.5;
        //  flex values of the right component as the user resizes them
        this.initialRightFlex = 0.5;
    }
    static handleElements() {
        const el = document.querySelector('#pie-stimulus-container');
        if (el) {
            const boundRect = el.getBoundingClientRect();
            el.style.height = `calc(100vh - ${boundRect.top}px`;
        }
    }
    componentDidRender() {
        PieStimulusLayout.handleElements();
    }
    componentDidLoad() {
        PieStimulusLayout.handleElements();
        if (this.allowedResize) {
            this.resizer.addEventListener('mousedown', (e) => {
                this.isResizing = true;
                this.initialX = e.clientX;
            });
            window.addEventListener('mousemove', this.handleMouseMove.bind(this));
            this.resizer.addEventListener('mouseup', this.handleMouseUp.bind(this));
        }
        this.readMoreButton.addEventListener("click", () => this.handleReadMore());
    }
    componentDidUpdate() {
        PieStimulusLayout.handleElements();
    }
    componentDidUnload() {
        if (this.allowedResize) {
            window.removeEventListener('mousemove', this.handleMouseMove.bind(this));
            this.resizer.removeEventListener('mouseup', this.handleMouseUp.bind(this));
        }
    }
    handleReadMore() {
        if (this.readMoreButton.innerHTML.includes('Read More')) {
            this.stimulus.style.flex = '1';
            this.readMoreButton.innerHTML = `Read Less <span class=arrow-up>&#9650;</span>`;
            this.stimulus.style.overflow = 'auto';
            this.stimulus.classList.remove('truncated');
        }
        else {
            this.readMoreButton.innerHTML = `Read More <span class=arrow-down>&#9660;</span>`;
            this.stimulus.style.flex = '0 0 30%';
            this.stimulus.style.overflow = 'hidden';
            this.stimulus.scrollTop = 0;
            this.stimulus.classList.add('truncated');
        }
    }
    handleMouseMove(e) {
        if (this.isResizing && this.allowedResize) {
            const deltaX = e.clientX - this.initialX;
            const containerWidth = this.resizer.parentElement.clientWidth;
            const newLeftFlex = (containerWidth * this.initialLeftFlex + deltaX) / containerWidth;
            const newRightFlex = 1 - newLeftFlex;
            if (newLeftFlex >= 0 && newRightFlex >= 0 && newLeftFlex <= 1 && newRightFlex <= 1) {
                this.initialLeftFlex = newLeftFlex;
                this.initialRightFlex = newRightFlex;
                // Update the initial cursor position
                this.initialX = e.clientX;
            }
        }
    }
    handleMouseUp() {
        this.isResizing = false;
    }
    // add style when the containers are resizable
    getStyle(flex) {
        const viewPortWidth = window.innerWidth;
        // avoid this style for viewports < 600
        if (this.allowedResize && viewPortWidth > 1200) {
            return { flex: `${flex}`, transition: this.isResizing ? 'none' : 'flex 0.1s ease' };
        }
        return {};
    }
    render() {
        return (h("div", { id: "pie-stimulus-container" },
            h("div", { id: "stimulus", class: "truncated", ref: (el) => this.stimulus = el, style: this.getStyle(this.initialLeftFlex) },
                h("slot", { name: 'stimulus' })),
            h("button", { id: "read-more", ref: (el) => this.readMoreButton = el },
                "Read More",
                h("span", { class: "arrow-down" }, "\u25BC")),
            this.allowedResize &&
                h("div", { id: "resizer", ref: (el) => (this.resizer = el) }),
            h("div", { id: "item", style: this.getStyle(this.initialRightFlex) },
                h("slot", { name: 'item' }))));
    }
    static get is() { return "pie-stimulus-layout"; }
    static get originalStyleUrls() { return {
        "$": ["pie-stimulus-layout.css"]
    }; }
    static get styleUrls() { return {
        "$": ["pie-stimulus-layout.css"]
    }; }
    static get properties() { return {
        "allowedResize": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "allowed-resize",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
    static get states() { return {
        "isResizing": {},
        "initialX": {},
        "initialLeftFlex": {},
        "initialRightFlex": {}
    }; }
}
