'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var classNames = require('clsx');
var useIsMounted = require('@prom-ui/core/useIsMounted');
var StarFill = require('@prom-ui/icons/StarFill');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

function _interopNamespaceCompat(e) {
    if (e && typeof e === 'object' && 'default' in e) return e;
    var n = Object.create(null);
    if (e) {
        Object.keys(e).forEach(function (k) {
            if (k !== 'default') {
                var d = Object.getOwnPropertyDescriptor(e, k);
                Object.defineProperty(n, k, d.get ? d : {
                    enumerable: true,
                    get: function () { return e[k]; }
                });
            }
        });
    }
    n.default = e;
    return Object.freeze(n);
}

var _defineProperty__default = /*#__PURE__*/_interopDefaultCompat(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultCompat(_slicedToArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultCompat(_objectWithoutProperties);
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);

var css = {"root":"RatingSelect__root___V-LdE","label":"RatingSelect__label___sgjOY","icon":"RatingSelect__icon___FTT2B","input":"RatingSelect__input___DxUIq","hovered":"RatingSelect__hovered___LD2kV"};

var _excluded = ["value", "name", "onChange", "onHover", "size", "disabled"];
var ITEMS_LIST = [1, 2, 3, 4, 5];
var RatingSelect = function RatingSelect(_ref) {
  var value = _ref.value,
    name = _ref.name,
    onChange = _ref.onChange,
    onHover = _ref.onHover,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 18 : _ref$size,
    disabled = _ref.disabled,
    props = _objectWithoutProperties__default.default(_ref, _excluded);
  var isMounted = useIsMounted.useIsMounted();
  var componentId = React__namespace.useId();
  var _React$useState = React__namespace.useState(value),
    _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
    selectedValue = _React$useState2[0],
    setSelectedValue = _React$useState2[1];
  var _React$useState3 = React__namespace.useState(true),
    _React$useState4 = _slicedToArray__default.default(_React$useState3, 2),
    isHovered = _React$useState4[0],
    setIsHovered = _React$useState4[1];
  var inputName = name || componentId;
  React__namespace.useEffect(function () {
    if (isMounted && typeof onChange === 'function') {
      onChange(selectedValue);
    }
  }, [selectedValue]);
  React__namespace.useEffect(function () {
    if (value !== selectedValue) {
      setSelectedValue(value);
    }
  }, [value]);
  var onInputChange = function onInputChange(inputValue) {
    setIsHovered(false);
    setSelectedValue(inputValue);
  };
  var onLabelClick = function onLabelClick(inputValue, e) {
    setIsHovered(false);
    if (!disabled && selectedValue === inputValue) {
      e === null || e === void 0 || e.preventDefault();
      setSelectedValue(undefined);
    }
  };
  var onLabelMouseEnter = function onLabelMouseEnter(inputValue) {
    if (!isHovered) {
      setIsHovered(true);
    }
    if (typeof onHover === 'function') {
      onHover(inputValue);
    }
  };
  var onRootMouseEnter = function onRootMouseEnter() {
    if (typeof onHover === 'function') {
      onHover(undefined);
    }
  };
  return /*#__PURE__*/React__namespace.createElement("div", {
    className: classNames__default.default(css.root, _defineProperty__default.default({}, css.hovered, isHovered)),
    style: {
      fontSize: size
    },
    onMouseLeave: onRootMouseEnter,
    "data-qaid": props['data-qaid'] || 'rating_select',
    "data-testid": props['data-testid'] || 'rating_select'
  }, ITEMS_LIST.map(function (inputValue) {
    var inputId = "".concat(inputName, "-").concat(inputValue);
    return /*#__PURE__*/React__namespace.createElement("input", {
      key: inputValue,
      id: inputId,
      className: css.input,
      type: "radio",
      name: inputName,
      value: inputValue,
      checked: selectedValue === inputValue,
      onChange: function onChange() {
        return onInputChange(inputValue);
      },
      disabled: disabled,
      "data-qaid": "rating_select_input_".concat(inputValue),
      "data-testid": "rating_select_input_".concat(inputValue)
    });
  }), ITEMS_LIST.map(function (inputValue) {
    var inputId = "".concat(inputName, "-").concat(inputValue);
    return /*#__PURE__*/React__namespace.createElement("label", {
      key: inputValue,
      className: css.label,
      htmlFor: inputId,
      onClick: function onClick(e) {
        return onLabelClick(inputValue, e);
      },
      onMouseEnter: function onMouseEnter() {
        return onLabelMouseEnter(inputValue);
      },
      "data-qaid": "rating_select_label_".concat(inputValue),
      "data-testid": "rating_select_label_".concat(inputValue)
    }, /*#__PURE__*/React__namespace.createElement(StarFill.SvgStarFill, {
      className: css.icon,
      focusable: false,
      "aria-hidden": true
    }));
  }));
};
RatingSelect.displayName = 'RatingSelect';

exports.RatingSelect = RatingSelect;

require('./style.development.v2.css');
