/*!
 * Crafted with ❤ by Salla
 */
import { h } from "@stencil/core";
import PencilRuler from "../../assets/svg/pencil-ruler.svg";
/**
 * @slot header - The upper section of the component.Empty by default.
 * @slot footer - The bottom section of the component.Empty by default.
 */
export class SallaProductSizeGuide {
    constructor() {
        this.hasError = false;
        salla.event.on('size-guide::open', (product_id) => this.open(product_id));
        salla.lang.onLoaded(() => {
            this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
            this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
            this.modal_title = salla.lang.get('pages.products.size_guides');
        });
    }
    /**
     * Show the size-guide modal window
     */
    async open(product_id) {
        this.modal.setTitle(this.modal_title);
        this.modal.open();
        return await salla.api.withoutNotifier(() => salla.product.getSizeGuides(product_id))
            .then((response) => {
            this.guides = response.data;
        })
            .catch(e => {
            console.log(e);
            this.hasError = true;
            this.placeholder_description = e.response?.data?.error?.message || e.response?.data;
        })
            .finally(() => this.modal.stopLoading());
    }
    /**
     *
     * Hide the size-guide modal window
     */
    async close() {
        return this.modal.close();
    }
    showPlaceholder() {
        return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
    }
    render() {
        return (h("salla-modal", { key: '890b39170a64cbe054d9abfeafde2304560848d7', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '5989a906d9d0e843142374c202aa5276731282e8', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: 'a87674a01f544d91a16303cf96111633ca4438a3', slot: "loading" }, h("div", { key: 'f1e2f05860bb25796752283af36515432803ca9a', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'e579db557854a2b7903f5c435977c8d410a9157a', height: '15px', width: '25%' }), h("div", { key: '0b6e56e41efeebfe5215afb17e69b465f5a9992a', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'fbc7b34bdb2cf914b7d197432132065a4d1c4152', height: '40px' }), h("salla-skeleton", { key: '8045c64a63a469f70f87f686ec986d0c6f5aa1c5', height: '40px' }), h("salla-skeleton", { key: '0abd35f5af325ca1f2208659a9fb1f2ca284adfd', height: '40px' }), h("salla-skeleton", { key: 'd444ac5dd6391b9c902e17f98c0d3c35a939e678', height: '40px' })), h("div", { key: '1a217120cd307a4b837175b3eace97788a4195e4', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: 'a47510c2ba3357066fe2452f8dbf899bda36177f', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'e097a5097938fc4fda820d753c42c08d06dabbea', height: '10px', width: '75%' }), h("salla-skeleton", { key: '16267e9b3f7a21aa384d8a8a59ff05473aebfe97', height: '10px', width: '50%' }), h("salla-skeleton", { key: '904842b7bde12557b9a72dc48bdeb6ebd3c65ed4', height: '10px', width: '75%' }), h("salla-skeleton", { key: '4286e18b5198144636f9f4ad8a2445ca41673918', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'b1483afcb842489b5c6997216bc7e8c24437f16f', height: '10px', width: '25%' }), h("salla-skeleton", { key: '140f19a164bbb547c844a8483efcd86f18336a20', height: '10px', width: '60%' }), h("salla-skeleton", { key: '23475f824cb98b0a776b5ae2b3715a14b9413d4b', height: '10px', width: '45%' }), h("salla-skeleton", { key: '75d3bcd58f50886ffad02b329d5153b0ae41d46e', height: '10px', width: '30%' })))), h("slot", { key: '836b93fd9084ee2f19077333ac31e1629a5ad118', name: "header" }), !this.hasError && !!this.guides ?
            [
                h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
            ]
            : this.showPlaceholder(), h("slot", { key: 'ac635b008e11b61918efb43ba6489c4130831a32', name: "footer" })));
    }
    static get is() { return "salla-product-size-guide"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-product-size-guide.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-product-size-guide.css"]
        };
    }
    static get states() {
        return {
            "guides": {},
            "productId": {},
            "placeholder_title": {},
            "placeholder_description": {},
            "modal_title": {},
            "hasError": {}
        };
    }
    static get methods() {
        return {
            "open": {
                "complexType": {
                    "signature": "(product_id: number) => Promise<any>",
                    "parameters": [{
                            "name": "product_id",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<any>"
                },
                "docs": {
                    "text": "Show the size-guide modal window",
                    "tags": []
                }
            },
            "close": {
                "complexType": {
                    "signature": "() => Promise<HTMLElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    },
                    "return": "Promise<HTMLElement>"
                },
                "docs": {
                    "text": "\nHide the size-guide modal window",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
}
