import { Host, h } from "@stencil/core";
import { Icon } from "../internal-component/icon";
import { MediaSkeleton } from "../internal-component/media-skeleton";
export class ZAvatar {
    pictureUrl = '';
    size = 'medium';
    isNotRound = false;
    displayName;
    hasError = false;
    isLoaded = false;
    handleError = () => {
        this.hasError = true;
    };
    handleLoad = () => {
        this.isLoaded = true;
    };
    componentWillLoad() {
        this.watchPictureUrl(this.pictureUrl);
    }
    watchPictureUrl(newValue) {
        if (!newValue) {
            this.hasError = true;
        }
        else {
            this.hasError = false;
        }
    }
    /**
     * Optimize Line profile picture URLs with size suffix
     * - /large = 200px x 200px
     * - /small = 51px x 51px
     */
    getOptimizedPictureUrl() {
        const url = this.pictureUrl || '';
        // Check if URL is from Line profile CDN
        if (!url.startsWith('https://sprofile.line-scdn.net')) {
            return url;
        }
        // Remove existing size suffix if present
        const baseUrl = url.replace(/\/(large|small)$/, '');
        // Use /large for bigger sizes, /small for smaller sizes
        const useLarge = ['medium', 'large', 'full'].includes(this.size);
        return `${baseUrl}/${useLarge ? 'large' : 'small'}`;
    }
    render() {
        const size = () => {
            if (this.size === '2x-small') {
                return {
                    base: 'z-avatar-2x-small',
                    icon: 'size-[8px]',
                    fontSize: 'text-[8px]',
                };
            }
            if (this.size === 'x-small') {
                return {
                    base: 'z-avatar-x-small',
                    icon: 'size-[10px]',
                    fontSize: 'text-[10px]',
                };
            }
            if (this.size === 'small') {
                return {
                    base: 'z-avatar-small',
                    icon: 'size-4',
                    fontSize: 'text-xs',
                };
            }
            if (this.size === 'medium') {
                return {
                    base: 'z-avatar-medium',
                    icon: 'size-8',
                    fontSize: 'text-base',
                };
            }
            if (this.size === 'large') {
                return {
                    base: 'z-avatar-large',
                    icon: 'size-16',
                    fontSize: 'text-4xl',
                };
            }
            if (this.size === 'full') {
                return {
                    base: 'z-avatar-full',
                    icon: 'size-32',
                    fontSize: 'text-7xl',
                };
            }
        };
        const optimizedUrl = this.getOptimizedPictureUrl();
        return (h(Host, null, this.hasError ? (h("div", { class: `bg-paper ${this.isNotRound ? '' : 'rounded-full'} ${size().base} z-avatar-error` }, this.displayName ? (h("span", { class: `text-surface font-semibold uppercase ${size().fontSize}` }, this.displayName.charAt(0))) : (h(Icon, { name: "UsersRound", addClass: `${size().icon} text-surface` })))) : (h("div", { class: `z-avatar-wrapper ${size().base} ${this.isNotRound ? '' : 'rounded-full'}` }, !this.isLoaded && h(MediaSkeleton, { addClass: this.isNotRound ? '' : 'rounded-full' }), h("img", { key: optimizedUrl, src: optimizedUrl, alt: "avatar", class: `z-avatar-image ${size().base} ${this.isNotRound ? '' : 'rounded-full'} object-cover`, onError: this.handleError, onLoad: this.handleLoad, loading: "lazy" })))));
    }
    static get is() { return "z-avatar"; }
    static get originalStyleUrls() {
        return {
            "$": ["z-avatar.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["z-avatar.css"]
        };
    }
    static get properties() {
        return {
            "pictureUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "picture-url",
                "defaultValue": "''"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'full'",
                    "resolved": "\"2x-small\" | \"full\" | \"large\" | \"medium\" | \"small\" | \"x-small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'medium'"
            },
            "isNotRound": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-not-round",
                "defaultValue": "false"
            },
            "displayName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "display-name"
            }
        };
    }
    static get states() {
        return {
            "hasError": {},
            "isLoaded": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "pictureUrl",
                "methodName": "watchPictureUrl"
            }];
    }
}
