import _Icon from "@alifd/next/es/icon";
import _Dropdown from "@alifd/next/es/dropdown";
import _Menu from "@alifd/next/es/menu";
import _Button from "@alifd/next/es/button";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["category", "trigger", "color", "bacColor", "label", "dataSource", "style"];
// import * as React from 'react';
// import { createElement, useEffect, useRef, useState } from 'react';
// import { Cascader, Button } from '@alifd/next';

// import './index.scss';

// export interface TextDropdownProps {
//     /**
//      * 类型
//      */
//     label?: React.ReactNode;
//     size?: 'small' | 'medium' | 'large';
//     placeholder?: string;
//     style?: 'object';
//     disabled?: boolean;
//     dataSource?: Array<data>;
//     hasArrow?: boolean;
//     multiple?: boolean;
//     hasBorder?: boolean;
//     hasClear?: boolean;
//     readOnly?: boolean;
//     notFoundContent?: React.ReactNode;
//     expandTriggerType?: 'click' | 'hover';
//     resultAutoWidth?: boolean;
//     followTrigger?: boolean;
//     showSearch?: boolean;
//     isPreview?: boolean;
//     onSearch?: (value: string) => void;
//     onVisibleChange?: (visible: boolean, type: string) => void;
// }
// const TextDropdown: React.FC<TextDropdownProps> = function TextDropdown({
//     // type = 'primary',
//     // color,
//     style = {},
//     //   title = '文字按钮',
//     disabled,
//     placeholder,
//     // resultAutoWidth,
//     dataSource,
//     followTrigger,
//     isPreview,
//     size,
//     hasArrow,
//     hasBorder,
//     notFoundContent,
//     expandTriggerType,
//     readOnly,
//     label,
//     multiple,
//     showSearch,
//     hasClear,
//     ...otherProps
// }) {
//     const _style = style || {};

//     // 禁用
//     //   if (disabled) _style.opacity = 0.6;
//     // 边框
//     //   if (borderFlag) _style.border = 'none';
//     // 背景色
//     //   if (type == 'primary') {
//     //     _style.color = '#409eff';
//     //   } else {
//     //     _style.color = '#000000';

//     //   }
//     if (!_style.width) _style.width = ''
//     if (!_style.color) _style.color = '#409EFF'
//     _style.backgroundColor = '#409EFF'

//     const _otherProps = otherProps || {};
//     _otherProps.style = _style;

//     const [flag, setFlag] = useState(false)

//     // 鼠标移入
//     const mouseenter = () => {
//         setFlag(true)
//     }

//     // 鼠标移出
//     const mouseleave = () => {
//         setFlag(false)
//     }

//     const [ifbutton, setIfbutton] = useState(false)
//     const buttonClick = (e) => {
//         if (ifbutton) {
//             setIfbutton(false)
//         } else {
//             setIfbutton(true)
//         }
//     }

//     const changeEvent = (value, data, extra) => {
//         console.log(value, data, extra, 5555555555555);

//     }
//     return (
//         <div style={{ width: "76px", height: "32px" }}>
//             {
//                 expandTriggerType === 'click' ? <div style={{ width: "100%", height: "100%" }}>
//                     <button onClick={buttonClick} style={{ width: "100%", height: "100%" }}> 更多1</button>
//                     {
//                         ifbutton ? (<Cascader
//                             listStyle={{ width: "128px", height: "256px" }}
//                             prefix="next-"
//                             size={size}
//                             hasArrow={hasArrow}
//                             hasBorder={hasBorder}
//                             // resultAutoWidth={resultAutoWidth}
//                             notFoundContent={notFoundContent}
//                             expandTriggerType={expandTriggerType}
//                             placeholder={placeholder}
//                             // onVisibleChange={onVisibleChange}
//                             dataSource={dataSource}
//                             followTrigger={followTrigger}
//                             isPreview={isPreview}
//                             {..._otherProps}
//                             label={label}
//                             disabled={disabled}
//                             hasClear={hasClear}
//                             multiple={multiple}
//                             showSearch={showSearch}
//                             onChange={changeEvent}
//                         // onSearch={onSearch}
//                         // ref={this._refsManager.linkRef(
//                         //     "cascaderselect-35b5c200"
//                         // )}
//                         />) : ''
//                     }
//                 </div> : <div onMouseEnter={mouseenter} onMouseLeave={mouseleave} style={{ width: "100%", height: "100%" }}>
//                     <button style={{ width: "100%", height: "100%" }}>更多2</button>
//                     {
//                         flag ? (<Cascader
//                             listStyle={{ width: "128px", height: "256px" }}
//                             prefix="next-"
//                             size={size}
//                             hasArrow={hasArrow}
//                             hasBorder={hasBorder}
//                             // resultAutoWidth={resultAutoWidth}
//                             notFoundContent={notFoundContent}
//                             expandTriggerType={expandTriggerType}
//                             placeholder={placeholder}
//                             // onVisibleChange={onVisibleChange}
//                             dataSource={dataSource}
//                             followTrigger={followTrigger}
//                             isPreview={isPreview}
//                             {..._otherProps}
//                             label={label}
//                             disabled={disabled}
//                             hasClear={hasClear}
//                             multiple={multiple}
//                             showSearch={showSearch}
//                         // onSearch={onSearch}
//                         // ref={this._refsManager.linkRef(
//                         //     "cascaderselect-35b5c200"
//                         // )}
//                         />) : ''
//                     }
//                 </div>
//             }
//         </div >
//     )
// };

// export default TextDropdown;

import * as React from 'react';
import { useState } from 'react';
import "./index.scss";
var TextDropdown = function TextDropdown(_ref) {
  var category = _ref.category,
    trigger = _ref.trigger,
    color = _ref.color,
    bacColor = _ref.bacColor,
    label = _ref.label,
    dataSource = _ref.dataSource,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _style = style || {};
  if (color) {
    _style.color = color;
  }
  var _otherProps = otherProps || {};
  _otherProps.style = _style;
  var _useState = useState(false),
    ifIcon = _useState[0],
    setIcon = _useState[1];
  var _onVisibleChange = function onVisibleChange() {
    if (ifIcon) {
      setIcon(false);
    } else {
      setIcon(true);
    }
  };
  return category === '按钮' ? /*#__PURE__*/React.createElement(_Dropdown, {
    trigger: /*#__PURE__*/React.createElement(_Button, {
      style: {
        border: "1px solid " + color,
        color: color,
        fontSize: '14px',
        backgroundColor: bacColor
      }
    }, label),
    triggerType: trigger === 'hover' ? ["hover"] : ["click"]
  }, /*#__PURE__*/React.createElement(_Menu, _otherProps, dataSource.map(function (item, index) {
    return /*#__PURE__*/React.createElement(_Menu.Item, null, item.label);
  }))) : /*#__PURE__*/React.createElement(_Dropdown, {
    trigger: /*#__PURE__*/React.createElement("span", {
      style: {
        padding: '2px 8px',
        fontSize: '14px',
        display: 'inline-block',
        backgroundColor: bacColor
      }
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        color: color
      }
    }, label), /*#__PURE__*/React.createElement(_Icon, {
      style: {
        color: color,
        marginLeft: '5px'
      },
      size: "small",
      type: !ifIcon ? "arrow-down" : "arrow-up"
    })),
    triggerType: trigger === 'hover' ? ["hover"] : ["click"],
    onVisibleChange: function onVisibleChange() {
      _onVisibleChange();
    }
  }, /*#__PURE__*/React.createElement(_Menu, _otherProps, dataSource.map(function (item, index) {
    return /*#__PURE__*/React.createElement(_Menu.Item, {
      disabled: item.disabled
    }, item.label);
  })));
};
export default TextDropdown;