import { VerdocsEndpoint, toggleStar } from "@verdocs/js-sdk";
import { h, Host } from "@stencil/core";
const OutlineStarIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg>`;
const SolidStarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>`;
/**
 * Displays a clickable star that allows users to mark frequently-used templates.
 */
export class VerdocsTemplateStar {
    constructor() {
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = VerdocsEndpoint.getDefault();
        this.updating = false;
    }
    async componentWillLoad() {
        this.endpoint.loadSession();
        if (!this.endpoint.session) {
            console.log('[TEMPLATES] Must be authenticated');
            return;
        }
    }
    toggle(e) {
        e.stopPropagation();
        this.updating = true;
        toggleStar(VerdocsEndpoint.getDefault(), this.template.id)
            .then(r => {
            this.updating = false;
            this.template.star_counter = r.star_counter;
            this.starChange.emit({
                templateId: this.template.id,
                starred: r.star_counter > 0,
                count: r.star_counter,
            });
        })
            .catch(e => {
            this.updating = false;
            console.log('[STAR] Error toggling template star', e.message);
            this.sdkError.emit(e);
        });
    }
    render() {
        return (h(Host, { key: 'bdfbe40a1cd377d83650684cde94e4d26f85ab6b' }, h("div", { key: '2e1c689464edef59bed1bfffd1314b8e726c9a39', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '3478e92b16be41c2359b6dd53d63cfa98f1d4b20', class: "count" }, this.template.star_counter || '--')));
    }
    static get is() { return "verdocs-template-star"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-template-star.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-template-star.css"]
        };
    }
    static get properties() {
        return {
            "endpoint": {
                "type": "unknown",
                "attribute": "endpoint",
                "mutable": false,
                "complexType": {
                    "original": "VerdocsEndpoint",
                    "resolved": "VerdocsEndpoint",
                    "references": {
                        "VerdocsEndpoint": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::VerdocsEndpoint"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "VerdocsEndpoint.getDefault()"
            },
            "template": {
                "type": "unknown",
                "attribute": "template",
                "mutable": true,
                "complexType": {
                    "original": "ITemplate",
                    "resolved": "ITemplate",
                    "references": {
                        "ITemplate": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::ITemplate"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The template to display the star for."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "updating": {}
        };
    }
    static get events() {
        return [{
                "method": "starChange",
                "name": "starChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the user toggles the star on or off. The event detail will contain\nthe new \"starred\" status and count."
                },
                "complexType": {
                    "original": "{templateId: string; starred: boolean; count: number}",
                    "resolved": "{ templateId: string; starred: boolean; count: number; }",
                    "references": {}
                }
            }, {
                "method": "sdkError",
                "name": "sdkError",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
                },
                "complexType": {
                    "original": "SDKError",
                    "resolved": "SDKError",
                    "references": {
                        "SDKError": {
                            "location": "import",
                            "path": "../../../utils/errors",
                            "id": "src/utils/errors.ts::SDKError"
                        }
                    }
                }
            }];
    }
}
//# sourceMappingURL=verdocs-template-star.js.map
