"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Rating = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const box_1 = __importDefault(require("../box"));
const core_1 = require("../core");
const icon_1 = __importDefault(require("../icon"));
const utils_1 = require("../utils");
const theme_1 = __importDefault(require("./theme"));
exports.Rating = (0, core_1.vui)((props, ref) => {
    var _a;
    const { value: propValue = 0, isDisabled = false, max: propMax, onChange, showAll: showAllProp = true, variant = 'yellow', size } = props, rest = __rest(props, ["value", "isDisabled", "max", "onChange", "showAll", "variant", "size"]);
    const [hoverValue, setHoverValue] = (0, react_1.useState)(null);
    const [internalValue, setInternalValue] = (0, react_1.useState)(propValue || 0);
    const [focusedStar, setFocusedStar] = (0, react_1.useState)(null);
    const containerRef = (0, react_1.useRef)(null);
    const isInteractive = !isDisabled && onChange !== undefined;
    const showAll = showAllProp || isInteractive;
    const { variants } = (_a = theme_1.default) !== null && _a !== void 0 ? _a : {};
    const color = isDisabled ? 'sandstone.79' : variants[variant].color;
    if (propValue < 0) {
        console.error(`Rating: value (${propValue}) cannot be negative`);
    }
    const value = Math.max(0, propValue);
    const max = propMax ? propMax : Math.max(value, 5);
    if (value > max) {
        console.error(`Rating: value (${value}) cannot be greater than max (${max})`);
    }
    const handleValueChange = (newValue) => {
        if (!isInteractive)
            return;
        const clampedValue = Math.max(0, Math.min(newValue, max));
        setInternalValue(clampedValue);
        onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
    };
    const handleStarClick = (clickedValue) => {
        if (!isInteractive)
            return;
        const newValue = clickedValue === internalValue ? 0 : clickedValue;
        handleValueChange(newValue);
    };
    const handleStarHover = (hoveredValue) => {
        if (!isInteractive)
            return;
        setHoverValue(hoveredValue);
    };
    const handleMouseLeave = () => {
        if (!isInteractive)
            return;
        setHoverValue(null);
    };
    const handleKeyDown = (event) => {
        if (!isInteractive)
            return;
        const currentValue = propValue !== undefined ? propValue : internalValue;
        switch (event.key) {
            case core_1.KeyboardKeys.ArrowRight:
            case core_1.KeyboardKeys.ArrowUp:
                event.preventDefault();
                handleValueChange(Math.min(currentValue + 1, max));
                break;
            case core_1.KeyboardKeys.ArrowLeft:
            case core_1.KeyboardKeys.ArrowDown:
                event.preventDefault();
                handleValueChange(Math.max(currentValue - 1, 0));
                break;
            case core_1.KeyboardKeys.Home:
                event.preventDefault();
                handleValueChange(0);
                break;
            case core_1.KeyboardKeys.End:
                event.preventDefault();
                handleValueChange(max);
                break;
        }
    };
    const handleFocus = () => {
        if (!isInteractive)
            return;
        if (focusedStar === null) {
            setFocusedStar(propValue !== undefined ? propValue : internalValue);
        }
    };
    const handleBlur = () => {
        if (!isInteractive)
            return;
        setFocusedStar(null);
    };
    const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue;
    return ((0, jsx_runtime_1.jsx)(box_1.default, Object.assign({ "aria-label": "Rating", "aria-valuemax": max, "aria-valuemin": 0, "aria-valuenow": displayValue, className: "vui-rating", focusRing: 3, focusRingColor: "focusColor", onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onMouseLeave: handleMouseLeave, outline: "none", ref: (0, utils_1.mergeRefs)(ref, containerRef), role: "slider", tabIndex: isInteractive ? 0 : -1 }, rest, { children: Array.from({ length: max }).map((_, index) => {
            const starValue = index + 1;
            const fullStar = index < displayValue;
            return ((0, jsx_runtime_1.jsx)(box_1.default, { className: "vui-rating-star", cursor: isInteractive ? 'pointer' : undefined, gap: "1px", onClick: () => handleStarClick(starValue), onFocus: () => setFocusedStar(starValue), onMouseEnter: () => handleStarHover(starValue), tabIndex: -1, children: fullStar ? ((0, jsx_runtime_1.jsx)(FullStar, { color: color, size: size })) : showAll ? ((0, jsx_runtime_1.jsx)(EmptyStar, { color: "sandstone.79", size: size })) : null }, index));
        }) })));
});
const FullStar = (props) => ((0, jsx_runtime_1.jsx)(icon_1.default, { color: props.color, name: "fasStar", size: props.size }));
const EmptyStar = (props) => ((0, jsx_runtime_1.jsx)(icon_1.default, { color: props.color, name: "falStar", size: props.size }));
exports.Rating.displayName = 'Rating';
exports.default = exports.Rating;
//# sourceMappingURL=rating.js.map