import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
const remSize = 16;
const maxDrawerWidth = 520;
const maxDrawerHeight = 800;
export class XDrawer {
    constructor() {
        this.show = false;
        this.contentShow = false;
        this.browser = {
            width: 0,
            height: 0,
        };
        this.drawer = {
            width: 0,
            height: 0,
            contentHeight: 0,
            controlsHeight: 0,
        };
        this.withRadiusBorder = false;
        this.isDragging = false;
        this.touchStart = undefined;
        this.touchEnd = undefined;
    }
    /**
     * Handles by touch if the drawer has to be open or closed
     */
    watchTouchEnd() {
        if ((this.touchStart.touches[0].clientY < this.touchEnd.changedTouches[0].clientY && this.contentShow) ||
            (this.touchStart.touches[0].clientY > this.touchEnd.changedTouches[0].clientY && !this.contentShow)) {
            this.onContentShow(this.touchStart);
        }
    }
    /**
     * Shows the Drawer by state
     *
     * @param state
     */
    async expand(state) {
        this.contentShow = state;
    }
    /**
     * Gets the drawer content element
     *
     * @returns HTMLDivElement
     */
    getDrawerContent() {
        return this.el.querySelector('.drawer-content');
    }
    /**
     * Gets the drawer controls element
     *
     * @returns HTMLDivElement
     */
    getDrawerControls() {
        return this.el.querySelector('.drawer-controls');
    }
    /**
     * Sets the browser dimensions properties
     */
    setupBrowserSize() {
        this.browser.width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
        this.browser.height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - (remSize * 2);
    }
    /**
     * Sets the drawer dimensions properties
     */
    setupDrawerSizes() {
        var _a, _b;
        this.drawer.contentHeight = ((_a = this.getDrawerContent()) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
        this.drawer.controlsHeight = ((_b = this.getDrawerControls()) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
        if (this.drawer.contentHeight > maxDrawerHeight) {
            this.drawer.contentHeight = maxDrawerHeight;
        }
        this.withRadiusBorder = this.browser.width > maxDrawerWidth;
        this.drawer.width = this.browser.width > maxDrawerWidth ? maxDrawerWidth - remSize : this.browser.width;
        this.drawer.height = this.browser.height > maxDrawerHeight ? maxDrawerHeight : this.browser.height;
    }
    /**
     * Setup the component container
     */
    setupContainer() {
        window.onresize = () => {
            this.setupBrowserSize();
            this.setupDrawerSizes();
        };
    }
    /**
     * To control if the Drawer content has to be shown
     *
     * @param ev
     * @returns
     */
    onContentShow(ev) {
        const target = ev.target;
        if (target.closest('a, button, x-button, x-fab')) {
            return ev.preventDefault();
        }
        if (this.getDrawerContent()) {
            this.setupDrawerSizes();
            this.getDrawerContent().style.paddingBottom = `${this.drawer.controlsHeight}px`;
        }
        this.expand(!this.contentShow);
        document.querySelector('body').style.overflowY = this.contentShow ? 'hidden' : 'auto';
    }
    /**
     * Before mount the element
     */
    componentWillLoad() {
        this.setupContainer();
        this.setupBrowserSize();
        this.setupDrawerSizes();
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '5ffd568972f863bccc70cb2ff3543a8479e68e34', class: cls({ show: this.contentShow && this.show }) }, h("div", { key: '1b0151dacc6a4b05b99dce54072b7f0c2e591d93', class: cls('drawer-content', { 'with-radius': this.withRadiusBorder }), style: { maxWidth: this.drawer.width + 'px' } }, h("div", { key: 'de8cf9171e520e8cfef8c1d72a4a10ae6f5c93d8', class: "drawer-top-control", onClick: ev => this.onContentShow(ev), onTouchStart: ev => this.touchStart = ev, onTouchEnd: ev => this.touchEnd = ev }), h("div", { key: 'ad30026a8c7caf8ebf42b7326ff8d486c9fd334e', class: "drawer-wrapper", style: { maxHeight: `${this.drawer.height - this.drawer.controlsHeight}px` } }, h("slot", { key: '9d4abd6c5f95503292a7d32d33097f0ef8639c3a' })), h("div", { key: 'ec4562406b71a2d7f675536d94e9fa5456d5924c', class: "drawer-bottom-control" })), h("div", { key: '81e6d000b152eaf5d4304829dc7530603133d964', class: cls('drawer-controls', { show: this.show, 'with-radius': this.withRadiusBorder }), style: { maxWidth: this.drawer.width + 'px' }, onClick: ev => this.onContentShow(ev), onTouchStart: ev => this.touchStart = ev, onTouchEnd: ev => this.touchEnd = ev }, h("slot", { key: 'ec33e8d274b032afc379ef9f6e7cdd75f2c33e2e', name: "controls" })));
    }
    static get is() { return "x-drawer"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "show": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element show content"
                },
                "attribute": "show",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "contentShow": {},
            "browser": {},
            "drawer": {},
            "withRadiusBorder": {},
            "isDragging": {},
            "touchStart": {},
            "touchEnd": {}
        };
    }
    static get methods() {
        return {
            "expand": {
                "complexType": {
                    "signature": "(state: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "state",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Shows the Drawer by state",
                    "tags": [{
                            "name": "param",
                            "text": "state"
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "touchEnd",
                "methodName": "watchTouchEnd"
            }];
    }
}
