/**
 * PisellSingleSelect - ReadOnlyView (只读态视图)
 * 只读状态下使用 Tag 展示选中值
 */

import React, { useMemo } from 'react';
import { Tag } from 'antd';
import classNames from 'classnames';
import { findOptionByValue } from '@pisell/utils';
import { getDefaultTagColor } from "../../../utils/tagColor";
var ReadOnlyView = function ReadOnlyView(props) {
  var _selectedOption$color;
  var value = props.value,
    options = props.options,
    label = props.label,
    required = props.required,
    className = props.className,
    style = props.style;
  var selectedOption = useMemo(function () {
    return value !== null && value !== undefined ? findOptionByValue(value, options) : undefined;
  }, [value, options]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-single-select-wrapper', 'pisell-single-select-readonly', className),
    style: style
  }, label && /*#__PURE__*/React.createElement("label", {
    className: classNames('pisell-single-select-label', {
      'pisell-single-select-label-required': required
    })
  }, label), /*#__PURE__*/React.createElement("div", {
    className: "pisell-single-select-readonly-display"
  }, selectedOption ? /*#__PURE__*/React.createElement(Tag, {
    className: "pisell-single-select-readonly-tag",
    color: (_selectedOption$color = selectedOption.color) !== null && _selectedOption$color !== void 0 ? _selectedOption$color : getDefaultTagColor(selectedOption.value, 0)
  }, selectedOption.icon && /*#__PURE__*/React.createElement("span", {
    className: "pisell-single-select-readonly-tag-icon"
  }, selectedOption.icon), selectedOption.label) : /*#__PURE__*/React.createElement("span", {
    className: "pisell-single-select-readonly-empty"
  }, "-")));
};
ReadOnlyView.displayName = 'PisellSingleSelectReadOnlyView';
export default ReadOnlyView;