// Stencil
import { h } from "@stencil/core";
/**
 * The scss have been copied to the scss folder
 * The source code comes from
 * https://github.com/BioPhoton/css-star-rating#readme
 */
export class StarRating {
    constructor() {
        // Props
        this.light = false; // If true the stars should be all white
        // Internal variables
        this.starIndexes = [1, 2, 3, 4, 5];
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentWillLoad() {
        this.rating = 0;
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user clicks on a star
     * Emit a change
     * @param event
     */
    setRating(_rating) {
        this.rating = _rating;
        this.ratingChanged.emit(this.rating);
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'value-' + this.rating + ' color-default rating medium star-icon direction-ltr' },
            h("div", { class: 'star-container' }, this.starIndexes.map(index => h("div", { class: 'star', onClick: (e) => this.setRating(index) },
                h("i", { class: 'star-empty ' + (this.light ? 'light-star' : 'colored-star') }),
                h("i", { class: 'star-half ' + (this.light ? 'light-star' : 'colored-star') }),
                h("i", { class: 'star-filled ' + (this.light ? 'light-star' : 'colored-star') }))))));
    }
    static get is() { return "star-rating"; }
    static get originalStyleUrls() { return {
        "$": ["star-rating.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["star-rating.css"]
    }; }
    static get properties() { return {
        "light": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "light",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
    static get states() { return {
        "rating": {}
    }; }
    static get events() { return [{
            "method": "ratingChanged",
            "name": "ratingChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            }
        }]; }
}
