import { Host, h } from "@stencil/core";
import { checkCircleFilled, userFilled } from "@pine-ds/icons/icons";
/**
 * @part asset-wrapper
 * @part button
 * @part image - The main image element that represents the avatar component.
*/
export class PdsAvatar {
    constructor() {
        /**
         * The alt for a custom user image.
         * @defaultValue null
         */
        this.alt = null;
        /**
         * Determines whether the badge is visible or not.
         * @defaultValue false
         */
        this.badge = false;
        /**
         * Determines whether the avatar functions as a dropdown trigger.
         * @defaultValue false
         */
        this.dropdown = false;
        /**
         * The src for a custom user image.
         * @defaultValue null
         */
        this.image = null;
        /**
         * The initials to display in the avatar when no image is provided.
         * @defaultValue null
         */
        this.initials = null;
        /**
         * Size of the avatar. Value can be preset or custom.
         * @defaultValue lg
         */
        this.size = 'lg';
        /**
         * Determines the variant of avatar. Changes appearance accordingly.
         * @defaultValue customer
         */
        this.variant = 'customer';
        this.renderAssetWrapper = () => {
            const style = {
                height: this.avatarSize(),
                width: this.avatarSize()
            };
            return (h("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
        };
        this.renderAvatar = () => {
            return (this.dropdown
                ?
                    h("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": "Avatar dropdown trigger" }, this.renderAssetWrapper())
                :
                    this.renderAssetWrapper());
        };
        this.renderBadge = () => (this.badge
            // Percentage is average size of icon in relation to total avatar size
            // of all preset sizes found in Figma.
            // Used to allow icons to scale to container size
            && h("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
        this.renderIconOrImage = () => {
            if (this.image) {
                return h("img", { alt: this.alt, src: this.image });
            }
            if (this.initials) {
                return (h("svg", { class: "pds-avatar__initials", viewBox: "0 0 32 32" }, h("text", { x: "16", y: "20" }, this.initials)));
            }
            // Percentage is average size of icon in relation to total avatar size
            // of all preset sizes found in Figma.
            // Used to allow icons to scale to container size
            return h("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
        };
        this.classNames = () => ({
            'pds-avatar': true,
            [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
            [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
            [`pds-avatar--${this.variant}`]: this.variant === 'admin'
        });
    }
    avatarSize() {
        const sizes = {
            xs: '24px',
            sm: '32px',
            md: '40px',
            lg: '56px',
            xl: '64px',
        };
        if (sizes[this.size]) {
            return sizes[this.size];
        }
        else {
            return this.size;
        }
    }
    render() {
        return (h(Host, { key: '7bdd177a6b7064ed12cabeb21d96b0a0cc6071ae', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
    }
    static get is() { return "pds-avatar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-avatar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-avatar.css"]
        };
    }
    static get properties() {
        return {
            "alt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "null"
                        }],
                    "text": "The alt for a custom user image."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "alt",
                "defaultValue": "null"
            },
            "badge": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether the badge is visible or not."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "badge",
                "defaultValue": "false"
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "dropdown": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether the avatar functions as a dropdown trigger."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "dropdown",
                "defaultValue": "false"
            },
            "image": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "null"
                        }],
                    "text": "The src for a custom user image."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image",
                "defaultValue": "null"
            },
            "initials": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "null"
                        }],
                    "text": "The initials to display in the avatar when no image is provided."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "initials",
                "defaultValue": "null"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "| 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "lg"
                        }],
                    "text": "Size of the avatar. Value can be preset or custom."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "size",
                "defaultValue": "'lg'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'customer' | 'admin'",
                    "resolved": "\"admin\" | \"customer\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "customer"
                        }],
                    "text": "Determines the variant of avatar. Changes appearance accordingly."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "variant",
                "defaultValue": "'customer'"
            }
        };
    }
}
//# sourceMappingURL=pds-avatar.js.map
