import { h } from '@stencil/core';
import { _t } from '../i18n/i18n';
export class Share {
    constructor() {
        this.popupHeight = 480;
        this.popupWidth = 640;
    }
    constructShareUrl(base, params) {
        let url = base;
        let qs = Object.keys(params || {})
            .filter((key) => params[key] !== undefined && params[key] !== null)
            .map((key) => `${key}=${encodeURIComponent(params[key])}`)
            .join('&');
        if (qs)
            url += `?${qs}`;
        return url;
    }
    share(platform) {
        let targetUrl = this.shareUrl || window.location.href;
        let title = this.shareTitle;
        if (!title) {
            let app = this.el.closest('gl-app');
            if (app)
                title = app.label;
        }
        let url;
        if (platform === 'twitter') {
            url = this.constructShareUrl('https://twitter.com/intent/tweet', {
                url: targetUrl,
                title: title,
                via: this.shareUser,
                hashtags: this.shareHashtags
            });
        }
        else {
            url = this.constructShareUrl('https://www.facebook.com/sharer.php', {
                u: targetUrl
            });
        }
        this.openUrl(url);
        this.closePopover();
    }
    openUrl(url) {
        window.open(url, 'gl-share', `width=${this.popupWidth},height=${this.popupHeight},` +
            `resizable,scrollbars=yes`);
    }
    closePopover() {
        let popover = this.el.closest('ion-popover');
        if (popover)
            popover.dismiss();
    }
    render() {
        let items = ['Facebook', 'Twitter'].map((name) => h("ion-item", { button: true, onClick: () => this.share(name.toLowerCase()) },
            h("ion-icon", { slot: "start", name: `logo-${name.toLowerCase()}` }),
            h("ion-label", null, name)));
        return (h("ion-list", null,
            h("ion-list-header", null, _t('webmapgl.share.title')),
            items));
    }
    static get is() { return "gl-share"; }
    static get properties() { return {
        "popupHeight": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "popup-height",
            "reflect": false,
            "defaultValue": "480"
        },
        "popupWidth": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "popup-width",
            "reflect": false,
            "defaultValue": "640"
        },
        "shareTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "share-title",
            "reflect": false
        },
        "shareUser": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "share-user",
            "reflect": false
        },
        "shareHashtags": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "share-hashtags",
            "reflect": false
        },
        "shareUrl": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "share-url",
            "reflect": false
        }
    }; }
    static get elementRef() { return "el"; }
}
