// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useState, useCallback } from 'react';
import { Text, useTheme, Stack } from '@fluentui/react';
import { Rating, RatingSize } from '@fluentui/react';
import { helperTextStyle, ratingHelperTextStyle, ratingStyles, titleContainerClassName } from './StarSurvey.styles';
/**
 * A component to allow users to send numerical ratings regarding call quality
 *
 * @internal
 */
export const _StarSurvey = (props) => {
    const { onStarRatingSelected, selectedIcon, unselectedIcon, strings } = props;
    const [rating, setRating] = useState(0);
    const [ratingHelperText, setRatingHelperText] = useState('');
    const theme = useTheme();
    const onRatingChange = useCallback((ev, rating) => {
        if (rating) {
            setRating(rating);
            switch (rating) {
                case 1:
                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText);
                    break;
                case 2:
                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText);
                    break;
                case 3:
                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText);
                    break;
                case 4:
                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText);
                    break;
                case 5:
                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText);
                    break;
                default:
                    break;
            }
            onStarRatingSelected === null || onStarRatingSelected === void 0 ? void 0 : onStarRatingSelected(rating);
        }
    }, [strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText, strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText, onStarRatingSelected]);
    return React.createElement(Stack, { verticalAlign: "center" },
        React.createElement(Stack, { className: titleContainerClassName },
            React.createElement(Text, { className: helperTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.starSurveyHelperText)),
        React.createElement(Rating, { max: 5, size: RatingSize.Large, defaultRating: 0, allowZeroStars: true, rating: rating, onChange: onRatingChange, styles: ratingStyles(theme), icon: selectedIcon !== null && selectedIcon !== void 0 ? selectedIcon : 'SurveyStarIconFilled', unselectedIcon: unselectedIcon !== null && unselectedIcon !== void 0 ? unselectedIcon : 'SurveyStarIcon', ariaLabelFormat: strings === null || strings === void 0 ? void 0 : strings.starRatingAriaLabel }),
        React.createElement(Text, { className: ratingHelperTextStyle(theme) }, ratingHelperText));
};
//# sourceMappingURL=StarSurvey.js.map