import { h } from "@stencil/core";
function getDecimalPrecision(num) {
    const decimalPart = num.toString().split('.')[1];
    return decimalPart ? decimalPart.length : 0;
}
function roundValueToPrecision(value, precision) {
    if (value == null) {
        return value;
    }
    const nearest = Math.round(value / precision) * precision;
    return Number(nearest.toFixed(getDecimalPrecision(precision)));
}
export class DgaRating {
    constructor() {
        this.size = 'md';
        this.value = -1;
        this.onChange = () => { };
        this.readOnly = false;
        this.max = 5;
        this.variant = 'default';
        this.rating = this.value;
        this.hover = -1;
        this.focus = -1;
        this.pressed = -1;
        this.handleMouseMove = (event) => {
            if (this.readOnly) {
                return;
            }
            const rootNode = this.rootRef;
            if (rootNode) {
                const { left, width: containerWidth } = rootNode.getBoundingClientRect();
                const percent = (event.clientX - left) / containerWidth;
                const precision = 0.5;
                const newHover = roundValueToPrecision(this.max * percent + precision / 2, precision);
                if (this.hover !== newHover || this.focus !== newHover) {
                    this.hover = newHover;
                    this.focus = newHover;
                }
            }
        };
        this.handleChange = (event) => {
            if (this.readOnly) {
                return;
            }
            let newValue = event.target.value === '' ? null : parseFloat(event.target.value);
            if (this.hover !== -1) {
                newValue = this.hover;
            }
            this.rating = newValue || -1;
        };
        this.handleClear = (event) => {
            if (event.clientX === 0 && event.clientY === 0) {
                return;
            }
            this.hover = -1;
            this.focus = -1;
        };
    }
    componentWillLoad() {
        this.rating = this.value;
    }
    watchRating(newRating, oldRating) {
        if (newRating !== oldRating) {
            this.onChange(this.rating);
            // this.ratingChange.emit(this.rating);
        }
    }
    watchValue(newValue, oldValue) {
        if (newValue !== oldValue && newValue != this.rating) {
            this.rating = newValue;
            // this.ratingChange.emit(this.rating);
        }
    }
    render() {
        return (h("span", { key: '8de2f6a1eb9c820cc723e1f39c038bd1a1350e16', class: `dga-rating dga-rating--${this.size}`, ref: el => (this.rootRef = el), onMouseMove: (event) => this.handleMouseMove(event), onMouseLeave: (event) => this.handleClear(event) }, Array.from({ length: this.max }, (_, index) => index + 1).map(value => {
            const colorMapper = {
                default: 'var(--background-secondary)',
                brand: 'var(--background-primary)',
            };
            return (h("span", { class: `dga-rating__star ${this.pressed === value ? "dga-rating__star--pressed" : ""}`, onMouseDown: () => this.pressed = value, onMouseUp: () => this.pressed = -1 }, h("label", { htmlFor: `star-${value - 0.5}`, style: {
                    width: this.hover > 0 ? (this.hover == value - 0.5 ? '50%' : '0%') : this.rating == value - 0.5 ? '50%' : '0%',
                    overflow: 'hidden',
                    position: 'absolute',
                }, class: "dga-rating__star__label" }, h("span", { class: "dga-rating__star__label-icon" }, h("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.1839 3.93733C22.8987 2.38758 25.1013 2.38759 25.8161 3.93733L30.3024 13.6635C30.5937 14.2952 31.1923 14.73 31.883 14.8119L42.5195 16.0731C44.2143 16.274 44.8949 18.3688 43.6419 19.5275L35.7781 26.7998C35.2674 27.272 35.0388 27.9757 35.1744 28.6579L37.2618 39.1636C37.5944 40.8375 35.8125 42.1321 34.3233 41.2985L24.9769 36.0668C24.3699 35.7271 23.6301 35.7271 23.0231 36.0668L13.6767 41.2985C12.1875 42.1321 10.4056 40.8375 10.7382 39.1636L12.8256 28.6579C12.9612 27.9757 12.7326 27.272 12.2219 26.7998L4.35805 19.5275C3.10505 18.3688 3.78569 16.274 5.48048 16.0731L16.117 14.8119C16.8077 14.73 17.4063 14.2952 17.6976 13.6635L22.1839 3.93733Z", style: {
                    fill: colorMapper[this.variant],
                } }))), h("span", { class: "dga-rating__star__label-text" }, value - 0.5, " Stars")), h("input", { class: "dga-rating__star__label-input", id: `star-${value - 0.5}`, type: "radio", name: "half-rating", defaultValue: (value - 0.5), onChange: this.handleChange, onMouseDown: () => this.pressed = value, onMouseUp: () => this.pressed = -1 }), h("label", { htmlFor: `star-${value}`, class: "dga-rating__star__label" }, h("span", { class: "dga-rating__star__label-icon" }, h("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.1839 3.93733C22.8987 2.38758 25.1013 2.38759 25.8161 3.93733L30.3024 13.6635C30.5937 14.2952 31.1923 14.73 31.883 14.8119L42.5195 16.0731C44.2143 16.274 44.8949 18.3688 43.6419 19.5275L35.7781 26.7998C35.2674 27.272 35.0388 27.9757 35.1744 28.6579L37.2618 39.1636C37.5944 40.8375 35.8125 42.1321 34.3233 41.2985L24.9769 36.0668C24.3699 35.7271 23.6301 35.7271 23.0231 36.0668L13.6767 41.2985C12.1875 42.1321 10.4056 40.8375 10.7382 39.1636L12.8256 28.6579C12.9612 27.9757 12.7326 27.272 12.2219 26.7998L4.35805 19.5275C3.10505 18.3688 3.78569 16.274 5.48048 16.0731L16.117 14.8119C16.8077 14.73 17.4063 14.2952 17.6976 13.6635L22.1839 3.93733Z", style: {
                    fill: this.hover > 0
                        ? this.hover >= value
                            ? colorMapper[this.variant]
                            : 'var(--background-neutral-200)'
                        : this.rating >= value
                            ? colorMapper[this.variant]
                            : 'var(--background-neutral-200)',
                } }))), h("span", { class: "dga-rating__star__label-text" }, value, " Star")), h("input", { class: "dga-rating__star__label-input", id: `star-${value}`, type: "radio", name: "half-rating", defaultValue: value, onChange: this.handleChange, onMouseDown: () => this.pressed = value, onMouseUp: () => this.pressed = -1 })));
        })));
    }
    static get is() { return "dga-rating"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-rating.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-rating.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'sm' | 'md' | 'lg'",
                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'md'"
            },
            "value": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": true,
                "defaultValue": "-1"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(value: number) => void",
                    "resolved": "(value: number) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => {}"
            },
            "readOnly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "read-only",
                "reflect": false,
                "defaultValue": "false"
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "max",
                "reflect": false,
                "defaultValue": "5"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'brand'",
                    "resolved": "\"brand\" | \"default\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'default'"
            }
        };
    }
    static get states() {
        return {
            "rating": {},
            "hover": {},
            "focus": {},
            "pressed": {}
        };
    }
    static get events() {
        return [{
                "method": "ratingChange",
                "name": "ratingChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "rating",
                "methodName": "watchRating"
            }, {
                "propName": "value",
                "methodName": "watchValue"
            }];
    }
}
//# sourceMappingURL=dga-rating.js.map
