import { format } from "date-fns";
import { h, Host } from "@stencil/core";
// TODO: See what was done in Storybook. Move all SVG icons to a common file that both projects can share
//  and reduce duplication between components for re-used icons. Also bring icons into Figma for reuse there.
const BusinessIcon = '<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';
/**
 * Display a small summary card describing an organization.
 *
 * ```ts
 * <verdocs-organization-card organization={organization} />
 * ```
 */
export class VerdocsOrganizationCard {
    constructor() {
        this.hovered = false;
    }
    onMouseOver() {
        this.hovered = true;
    }
    onMouseOut() {
        this.hovered = false;
    }
    render() {
        var _a, _b, _c, _d, _e, _f;
        console.log('Rendering org card', this.organization.thumbnail_url, this.organization);
        const fallbackIcon = BusinessIcon;
        const portalId = `verdocs-org-card-${this.organization.id}`;
        return (h(Host, { key: 'afab00c0594b7f49114cb0cd6d0f35072a6557a9', id: portalId }, this.organization.thumbnail_url ? h("img", { class: "icon", src: this.organization.thumbnail_url, alt: "Logo" }) : h("span", { class: "icon", innerHTML: fallbackIcon }), h("span", { key: '820fee6596d9724cfa6628d1b820fccf8c448040', class: "content" }, (_a = this.organization) === null || _a === void 0 ? void 0 : _a.name), h("verdocs-portal", { key: '9d96819970166e1dba589b8e7bcfecb17302b642', anchor: portalId }, h("div", { key: '9afb356db5a41fab522196b24001079656895bb8', class: "verdocs-org-card-popup", style: { display: this.hovered ? 'block' : 'none' } }, this.organization.full_logo_url ? (h("div", { class: "popup-header-with-logo" }, h("img", { src: this.organization.full_logo_url, alt: "Logo" }), h("div", { class: "title" }, (_b = this.organization) === null || _b === void 0 ? void 0 : _b.name))) : (h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: fallbackIcon })), h("span", { class: "title" }, (_c = this.organization) === null || _c === void 0 ? void 0 : _c.name))), h("div", { key: 'fbd533d1b9981ed1748426ca40cf2acef04b4516', class: "popup-body" }, h("div", { key: '5d9e78644cb47b61aaf86051aada3e6af888552a', class: "field" }, h("strong", { key: '6c734f2d6f847bd52dba49bd0d3d76765df30af9' }, "Joined"), format(new Date(((_d = this.organization) === null || _d === void 0 ? void 0 : _d.created_at) || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: 'e8a7221d73736f7832a2cc839a32efb9bcd50348', class: "field" }, h("strong", { key: '1aeb04edea44fb6db755a22a07ca34f22ad4f72d' }, "Website"), h("a", { key: '26c2d1306f50aa2560525415bb0874f5cb9e461d', href: (_e = this.organization) === null || _e === void 0 ? void 0 : _e.url, target: "_blank", rel: "nofollow" }, (_f = this.organization) === null || _f === void 0 ? void 0 : _f.url))))))));
    }
    static get is() { return "verdocs-organization-card"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-organization-card.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-organization-card.css"]
        };
    }
    static get properties() {
        return {
            "organization": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Partial<IOrganization>",
                    "resolved": "{ id?: string; name?: string; address?: string; address2?: string; phone?: string; contact_email?: string; slug?: string; url?: string; full_logo_url?: string; thumbnail_url?: string; primary_color?: string; secondary_color?: string; parent_id?: string; disclaimer?: string; terms_use_url?: string; privacy_policy_url?: string; powered_by_label?: string; powered_by_url?: string; data?: Record<string, any>; created_at?: string; updated_at?: string; api_keys?: IApiKey[]; children?: IOrganization[]; parent?: IOrganization; groups?: IGroup[]; oauth2_apps?: IOAuth2App[]; entitlements?: IEntitlement[]; organization_invitations?: IOrganizationInvitation[]; profiles?: IProfile[]; webhooks?: IWebhook[]; envelopes?: IEnvelope[]; templates?: ITemplate[]; group_profiles?: IGroupProfile[]; pending_webhooks?: IPendingWebhook[]; }",
                    "references": {
                        "Partial": {
                            "location": "global",
                            "id": "global::Partial"
                        },
                        "IOrganization": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::IOrganization"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The organization to display"
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "hovered": {}
        };
    }
    static get listeners() {
        return [{
                "name": "mouseover",
                "method": "onMouseOver",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "mouseout",
                "method": "onMouseOut",
                "target": undefined,
                "capture": false,
                "passive": true
            }];
    }
}
//# sourceMappingURL=verdocs-organization-card.js.map
