import _Balloon from "@alifd/next/es/balloon";
import _Radio from "@alifd/next/es/radio";
import * as React from 'react';
import Icon from '../icon';
import './index.less';
var RadioGroup = _Radio.Group;
export default (function (props) {
  var dataList = props.dataList,
    styleKey = props.styleKey,
    onStyleChange = props.onStyleChange,
    styleData = props.styleData;
  var value = styleData[styleKey];
  var onRadioChange = function onRadioChange(key, val) {
    onStyleChange([{
      styleKey: key,
      value: val
    }]);
  };
  var onRadioItemClick = function onRadioItemClick(key, val, value) {
    if (value == val) {
      onStyleChange([{
        styleKey: key,
        value: null
      }]);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "radiogroup-style"
  }, /*#__PURE__*/React.createElement(RadioGroup, {
    value: value,
    shape: "button",
    onChange: function onChange(val) {
      return onRadioChange(styleKey, val);
    },
    "aria-labelledby": "groupId"
  }, dataList && dataList.map(function (item) {
    return /*#__PURE__*/React.createElement(_Balloon, {
      trigger: /*#__PURE__*/React.createElement(_Radio, {
        id: item.value,
        value: item.value,
        onClick: function onClick(e) {
          onRadioItemClick(styleKey, e.currentTarget.id, value);
        }
      }, item.icon ? /*#__PURE__*/React.createElement(Icon, {
        type: item.icon,
        size: "small"
      }) : item.title),
      triggerType: "hover",
      closable: false,
      align: "t"
    }, item.tips);
  })));
});