import { h, Host } from "@stencil/core";
import { QuoteType } from "./quote-type.enum";
import { QuoteImagePosition } from "./quote-image-position.enum";
import { QuoteImageInnerPosition } from "./quote-image-inner-position.enum";
import { QuoteVariation } from "./quote-variation.enum";
import { UtilBreakpointObserverBreakpoints } from "../../_util/util-breakpoint-observer/util-breakpoint-observer-breakpoints.enum";
/**
 *
 * @enums QuoteVariation - quote-variation.enum
 * @enums QuoteType - quote-type.enum
 * @enums QuoteImagePosition - quote-image-position.enum
 * @enums QuoteImageInnerPosition - quote-image-inner-position.enum
 * @swedishName Citat
 */
export class Quote {
    constructor() {
        this.isMobile = false;
        this.afType = QuoteType.DEFAULT;
        this.afVariation = QuoteVariation.TRANSPARENT;
        this.afQuoteAuthorName = undefined;
        this.afQuoteAuthorTitle = undefined;
        this.afImagePosition = QuoteImagePosition.TOP;
        this.afImageSrc = undefined;
        this.afImageAlt = undefined;
        this.afImageInnerPosition = QuoteImageInnerPosition.CENTER;
    }
    getImageInnerPosition() {
        switch (this.afImageInnerPosition) {
            case QuoteImageInnerPosition.LEFT:
                return 'left center';
            case QuoteImageInnerPosition.RIGHT:
                return 'right center';
            default:
                return 'center center';
        }
    }
    breakpointHandler(e) {
        if (e.detail.value) {
            if (e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) {
                this.isMobile = true;
            }
            else {
                this.isMobile = false;
            }
        }
    }
    get cssModifiers() {
        return {
            'digi-quote--default': this.afType === QuoteType.DEFAULT,
            'digi-quote--highlight': this.afType === QuoteType.HIGHLIGHT,
            'digi-quote--variation-primary': this.afVariation === QuoteVariation.PRIMARY,
            'digi-quote--variation-secondary': this.afVariation === QuoteVariation.SECONDARY,
            'digi-quote--variation-tertiary': this.afVariation === QuoteVariation.TERTIARY,
            'digi-quote--transparent': this.afVariation === QuoteVariation.TRANSPARENT,
            [`digi-quote--image-${this.afImagePosition}`]: this.afImageSrc
        };
    }
    renderQuotationMark() {
        return (h("svg", { class: "digi-quote-default__icon", "aria-hidden": "true", width: "28px", height: "23px", viewBox: "0 0 51 40" }, h("path", { d: "M0.602908277,34.1566952 C4.73191648,32.1718898 7.96569724,29.8622982 10.3042506,27.2279202 C12.6428039,24.5935423 13.99478,21.3998101 14.360179,17.6467236 L11.2908277,17.6467236 C9.02535421,17.6467236 7.18008949,17.3941121 5.75503356,16.8888889 C4.32997763,16.3836657 3.17897092,15.679962 2.30201342,14.7777778 C1.46159582,13.9116809 0.867822521,12.9553656 0.520693512,11.9088319 C0.173564504,10.8622982 0,9.77967711 0,8.66096866 C0,6.35137702 0.940902312,4.33048433 2.82270694,2.5982906 C4.70451156,0.866096866 6.92431022,0 9.48210291,0 C13.5014914,0 16.5891126,1.31718898 18.7449664,3.95156695 C20.9008203,6.58594492 21.9787472,10.2307692 21.9787472,14.8860399 C21.9787472,19.2165242 20.1243475,23.5830959 16.4155481,27.985755 C12.7067487,32.3884141 8.23974646,35.7264957 3.01454139,38 L0.602908277,34.1566952 Z M27.6241611,34.1566952 C31.7531693,32.1718898 34.98695,29.8622982 37.3255034,27.2279202 C39.6640567,24.5935423 41.0160328,21.3998101 41.3814318,17.6467236 L38.3120805,17.6467236 C36.046607,17.6467236 34.2013423,17.3941121 32.7762864,16.8888889 C31.3512304,16.3836657 30.2002237,15.679962 29.3232662,14.7777778 C28.4828486,13.9116809 27.8890753,12.9553656 27.5419463,11.9088319 C27.1948173,10.8622982 27.0212528,9.77967711 27.0212528,8.66096866 C27.0212528,6.35137702 27.9621551,4.33048433 29.8439597,2.5982906 C31.7257644,0.866096866 33.945563,0 36.5033557,0 C40.5227442,0 43.6103654,1.31718898 45.7662192,3.95156695 C47.9220731,6.58594492 49,10.2307692 49,14.8860399 C49,19.2165242 47.1456003,23.5830959 43.4368009,27.985755 C39.7280015,32.3884141 35.2609993,35.7264957 30.0357942,38 L27.6241611,34.1566952 Z" })));
    }
    renderImage() {
        if (!this.afImageSrc) {
            return null;
        }
        return (h("div", { class: "digi-quote__image" }, h("img", { class: "digi-quote__img", src: this.afImageSrc, alt: this.afImageAlt, style: { objectPosition: this.getImageInnerPosition() } })));
    }
    renderAuthorName() {
        return h("p", { class: "digi-quote__author" }, this.afQuoteAuthorName);
    }
    renderAuthorTitle() {
        return h("p", { class: "digi-quote__author-title" }, this.afQuoteAuthorTitle);
    }
    renderTypeDefault() {
        if (this.afType !== QuoteType.DEFAULT) {
            return;
        }
        const wrapperClass = (() => {
            if (this.isMobile) {
                return 'digi-quote__variation-wrapper-vertical-image';
            }
            if (this.afImagePosition === QuoteImagePosition.TOP) {
                return 'digi-quote__variation-wrapper-vertical-image';
            }
            else if (this.afImagePosition === QuoteImagePosition.NONE) {
                return 'digi-quote__variation-wrapper-no-image';
            }
            else {
                return 'digi-quote__variation-wrapper';
            }
        })();
        return (h("div", { class: wrapperClass }, this.afImagePosition === QuoteImagePosition.LEFT ||
            this.afImagePosition === QuoteImagePosition.RIGHT ? (h("div", { class: `digi-quote__image-wrapper digi-quote__image-position--${this.afImagePosition}` }, this.renderImage(), h("div", { class: "digi-quote-icon-flex" }, h("section", { class: "digi-quote__text" }, h("digi-typography", null, this.renderQuotationMark(), h("blockquote", null, h("slot", null))), h("digi-typography", null, this.afQuoteAuthorName && this.renderAuthorName(), this.afQuoteAuthorTitle && this.renderAuthorTitle()))))) : this.afImagePosition === QuoteImagePosition.TOP ? (h("div", { class: `digi-quote__image-wrapper digi-quote__image-position--${this.afImagePosition}` }, this.renderImage(), h("section", { class: "digi-quote__text" }, h("digi-typography", null, this.renderQuotationMark(), h("blockquote", null, h("slot", null))), h("digi-typography", null, this.afQuoteAuthorName && this.renderAuthorName(), this.afQuoteAuthorTitle && this.renderAuthorTitle())))) : (h("section", { class: "digi-quote__text" }, h("div", { class: 'digi-quote__variation-wrapper-no-image' }, h("digi-typography", null, this.renderQuotationMark(), h("blockquote", null, h("slot", null))), h("digi-typography", null, this.afQuoteAuthorName && this.renderAuthorName(), this.afQuoteAuthorTitle && this.renderAuthorTitle()))))));
    }
    renderTypeHighlight() {
        if (this.afType !== QuoteType.HIGHLIGHT) {
            return;
        }
        return (h("div", { class: "digi-quote__variation--highlight-wrapper" }, h("div", { class: { 'quote-image': true, hide: !this.isMobile } }, this.renderImage()), h("div", { class: "digi-quote-icon-flex" }, h("span", { class: "quote-icon" }, this.renderQuotationMark()), h("div", { class: "quote-content" }, h("digi-typography", null, h("blockquote", null, h("slot", null))), h("digi-typography", null, this.afQuoteAuthorName && this.renderAuthorName(), this.afQuoteAuthorTitle && this.renderAuthorTitle()))), h("div", { class: { 'quote-image': true, hide: this.isMobile } }, this.renderImage())));
    }
    render() {
        return (h(Host, { key: '2d4a0547ac66124d2b9b028de463b9bd8fc9a61f' }, h("digi-util-breakpoint-observer", { key: '6d8d8d734735702b5432733affd4ffaf8d57bdda', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'f0a5ab18a25e1682e157cf7091c68b1d2b4fbf9a', class: Object.assign({ 'digi-quote': true }, this.cssModifiers) }, this.renderTypeHighlight(), this.renderTypeDefault())));
    }
    static get is() { return "digi-quote"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["quote.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["quote.css"]
        };
    }
    static get properties() {
        return {
            "afType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "QuoteType",
                    "resolved": "QuoteType.DEFAULT | QuoteType.HIGHLIGHT",
                    "references": {
                        "QuoteType": {
                            "location": "import",
                            "path": "./quote-type.enum",
                            "id": "src/components/_quote/quote/quote-type.enum.ts::QuoteType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set variation with enum QuoteType. Can be 'default or 'highlight"
                        }],
                    "text": "S\u00E4tter variant genom enum QuoteType. Kan vara 'default' eller 'highlight'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-type",
                "reflect": false,
                "defaultValue": "QuoteType.DEFAULT"
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "QuoteVariation",
                    "resolved": "QuoteVariation.PRIMARY | QuoteVariation.SECONDARY | QuoteVariation.TERTIARY | QuoteVariation.TRANSPARENT",
                    "references": {
                        "QuoteVariation": {
                            "location": "import",
                            "path": "./quote-variation.enum",
                            "id": "src/components/_quote/quote/quote-variation.enum.ts::QuoteVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets background color with enum QuoteVariation. Can be 'transparent', 'primary', 'secondary' or 'tertiary'"
                        }],
                    "text": "S\u00E4tter bakgrundsf\u00E4rg genom enum QuoteVariation. Kan vara 'transparent', 'primary', 'secondary' eller 'tertiary'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "QuoteVariation.TRANSPARENT"
            },
            "afQuoteAuthorName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "the quote authors"
                        }],
                    "text": "Namnet p\u00E5 citatets upphovsperson"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-quote-author-name",
                "reflect": false
            },
            "afQuoteAuthorTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Description of the author"
                        }],
                    "text": "Upphovspersonens titel"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-quote-author-title",
                "reflect": false
            },
            "afImagePosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "QuoteImagePosition",
                    "resolved": "QuoteImagePosition.LEFT | QuoteImagePosition.NONE | QuoteImagePosition.RIGHT | QuoteImagePosition.TOP",
                    "references": {
                        "QuoteImagePosition": {
                            "location": "import",
                            "path": "./quote-image-position.enum",
                            "id": "src/components/_quote/quote/quote-image-position.enum.ts::QuoteImagePosition"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the position of the image with enum QuoteImagePosition. Can be 'top', 'left', 'right' and 'none'"
                        }],
                    "text": "Styr positionen p\u00E5 bilden genom enum QuoteImagePosition. Kan vara 'top', 'left', 'right' och 'none'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-image-position",
                "reflect": false,
                "defaultValue": "QuoteImagePosition.TOP"
            },
            "afImageSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set `src` attribute"
                        }],
                    "text": "S\u00E4tter attributet 'src' p\u00E5 img-elementet"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-image-src",
                "reflect": false
            },
            "afImageAlt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set `alt` attribute"
                        }],
                    "text": "S\u00E4tter attributet 'alt' p\u00E5 img-elementet"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-image-alt",
                "reflect": false
            },
            "afImageInnerPosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "QuoteImageInnerPosition",
                    "resolved": "QuoteImageInnerPosition.CENTER | QuoteImageInnerPosition.LEFT | QuoteImageInnerPosition.RIGHT",
                    "references": {
                        "QuoteImageInnerPosition": {
                            "location": "import",
                            "path": "./quote-image-inner-position.enum",
                            "id": "src/components/_quote/quote/quote-image-inner-position.enum.ts::QuoteImageInnerPosition"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets image inner position horizontally in relation to parent div."
                        }],
                    "text": "Styr bildens position horisontellt i relation till f\u00F6r\u00E4lder-diven."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-image-inner-position",
                "reflect": false,
                "defaultValue": "QuoteImageInnerPosition.CENTER"
            }
        };
    }
    static get states() {
        return {
            "isMobile": {}
        };
    }
}
