// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
// Constants
const MAX_EXPERT_DESCRIPTION_LENGTH = 200;
export class ExpertOverview {
    constructor() {
        // Props
        this.expertFirstName = '';
        this.expertLastName = '';
        this.suffix = ''; // like 'tour's author'
        this.fullPortraitButton = '';
        this.expertSpeciality = '';
        this.expertAvatar = null;
        this.expertDescription = '';
        // Internal variables
        this.workingExpertDescription = '';
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentWillLoad() {
        this.workingExpertDescription = this.expertDescription.slice(0, MAX_EXPERT_DESCRIPTION_LENGTH);
        if (this.expertDescription.length > MAX_EXPERT_DESCRIPTION_LENGTH) {
            this.workingExpertDescription = this.workingExpertDescription.concat('...');
        }
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user wants to see the portrait of the expert
     */
    onPortraitClick() {
        this.portraitClick.emit();
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'expert-container' },
            h("h4", { class: 'expert-name' },
                this.expertFirstName,
                " ",
                this.expertLastName,
                ", ",
                this.suffix),
            h("div", { class: 'expert-description-container' },
                h("div", null,
                    h("p", { class: 'expert-description-text' }, this.workingExpertDescription),
                    h("ion-button", { fill: 'clear', color: 'primary', class: 'detail-button', onClick: () => this.onPortraitClick() }, this.fullPortraitButton)),
                this.expertAvatar
                    ? h("div", { class: 'expert-description-avatar ion-activatable', style: { backgroundImage: 'url(' + MediaTool.imageXS(this.expertAvatar) + ')' }, onClick: () => this.onPortraitClick() },
                        h("ion-ripple-effect", null))
                    : '')));
    }
    static get is() { return "expert-overview"; }
    static get originalStyleUrls() { return {
        "$": ["expert-overview.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["expert-overview.css"]
    }; }
    static get properties() { return {
        "expertFirstName": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "expert-first-name",
            "reflect": false,
            "defaultValue": "''"
        },
        "expertLastName": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "expert-last-name",
            "reflect": false,
            "defaultValue": "''"
        },
        "suffix": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "suffix",
            "reflect": false,
            "defaultValue": "''"
        },
        "fullPortraitButton": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "full-portrait-button",
            "reflect": false,
            "defaultValue": "''"
        },
        "expertSpeciality": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "expert-speciality",
            "reflect": false,
            "defaultValue": "''"
        },
        "expertAvatar": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "MediaElement",
                "resolved": "MediaElement",
                "references": {
                    "MediaElement": {
                        "location": "import",
                        "path": "../../../models/media/media-model"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "null"
        },
        "expertDescription": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "expert-description",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get events() { return [{
            "method": "portraitClick",
            "name": "portraitClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
