'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _popover = require('antd/lib/popover');

var _popover2 = _interopRequireDefault(_popover);

var _button = require('antd/lib/button');

var _button2 = _interopRequireDefault(_button);

var _badge = require('antd/lib/badge');

var _badge2 = _interopRequireDefault(_badge);

var _icon = require('antd/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

var _IconList = require('./IconList');

var _IconList2 = _interopRequireDefault(_IconList);

var _icons = require('@fishx/icons');

var FishxIcons = _interopRequireWildcard(_icons);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var allIcons = FishxIcons;
var IconPicker = function IconPicker(_ref) {
    var _ref$mode = _ref.mode,
        mode = _ref$mode === undefined ? 'inline' : _ref$mode,
        defaultValue = _ref.defaultValue,
        value = _ref.value,
        _ref$readonly = _ref.readonly,
        readonly = _ref$readonly === undefined ? false : _ref$readonly,
        onChange = _ref.onChange,
        _ref$className = _ref.className,
        className = _ref$className === undefined ? '' : _ref$className,
        _ref$style = _ref.style,
        style = _ref$style === undefined ? {} : _ref$style,
        placeholder = _ref.placeholder,
        overlayClassName = _ref.overlayClassName,
        overlayStyle = _ref.overlayStyle,
        displayFromIconfontCN = _ref.displayFromIconfontCN,
        showClearBtn = _ref.showClearBtn,
        showColorSelect = _ref.showColorSelect;

    var _useState = (0, _react.useState)(value || defaultValue),
        _useState2 = (0, _slicedToArray3['default'])(_useState, 2),
        iconType = _useState2[0],
        setIconType = _useState2[1];

    var _useState3 = (0, _react.useState)(false),
        _useState4 = (0, _slicedToArray3['default'])(_useState3, 2),
        showDot = _useState4[0],
        setShowDot = _useState4[1];

    var _useState5 = (0, _react.useState)(''),
        _useState6 = (0, _slicedToArray3['default'])(_useState5, 2),
        currentColor = _useState6[0],
        setCurrentColor = _useState6[1];

    var _useState7 = (0, _react.useState)(''),
        _useState8 = (0, _slicedToArray3['default'])(_useState7, 2),
        selectedColor = _useState8[0],
        setSelectedColor = _useState8[1];

    var Component = allIcons[iconType];
    var departmentIconList = _react2['default'].useMemo(function () {
        return Object.keys(allIcons).filter(function (iconName) {
            return iconName.indexOf('P') === 0 && iconName.substring(1, 2).match(/^.*[A-Z]+.*$/);
        });
    }, []);
    var IconFont = (0, _icons.createFromIconfontCN)({
        scriptUrl: displayFromIconfontCN
    });
    (0, _react.useEffect)(function () {
        setCurrentColor(null);
    }, [currentColor]);
    var handleHover = function handleHover(v) {
        if (showClearBtn && mode !== 'inline' && iconType) {
            setShowDot(v);
        }
    };
    var handleClick = function handleClick() {
        if (showClearBtn && mode !== 'inline' && iconType) {
            setIconType('');
            setShowDot(false);
            setCurrentColor('');
            setSelectedColor('');
        }
    };
    var defaultStyle = {
        padding: '8px',
        maxHeight: '250px',
        overflowY: 'auto'
    };
    var modalStaticEl = function modalStaticEl() {
        return _react2['default'].createElement(
            'div',
            { onMouseLeave: function onMouseLeave() {
                    handleHover(false);
                }, style: { display: 'inline-block' } },
            _react2['default'].createElement(
                _badge2['default'],
                { count: _react2['default'].createElement(_icon2['default'], { type: 'close-circle', theme: 'filled', style: { color: '#EF222C', fontSize: '16px', visibility: showDot ? 'visible' : 'hidden', opacity: showDot ? 1 : 0, transition: 'all 0.3s ease-in-out' }, onClick: function onClick() {
                            return handleClick();
                        } }) },
                _react2['default'].createElement(
                    _button2['default'],
                    { className: 'cursor-pointer ' + className, style: style, onMouseEnter: function onMouseEnter() {
                            handleHover(true);
                        } },
                    !iconType ? placeholder || 'please select' : displayFromIconfontCN ? _react2['default'].createElement(IconFont, { type: iconType, style: { color: selectedColor } }) : _react2['default'].createElement(Component, { style: { color: selectedColor } })
                )
            )
        );
    };
    var ModalEl = _react2['default'].createElement(
        _popover2['default'],
        { overlayClassName: overlayClassName || "defaultOverlay", overlayStyle: overlayStyle || { width: '319px' }, trigger: 'click', placement: 'topLeft', content: _react2['default'].createElement(_IconList2['default'], { dataSource: departmentIconList, currentIcon: iconType, setIconType: setIconType, iconChange: onChange, readonly: readonly, displayFromIconfontCN: displayFromIconfontCN, showColorSelect: showColorSelect, currentColor: currentColor, colorChange: setSelectedColor }) },
        modalStaticEl()
    );
    return _react2['default'].createElement(
        _react2['default'].Fragment,
        null,
        mode === 'inline' ? _react2['default'].createElement(
            'div',
            { className: className, style: (0, _extends3['default'])((0, _extends3['default'])({}, defaultStyle), style) },
            _react2['default'].createElement(_IconList2['default'], { dataSource: departmentIconList, currentIcon: iconType, setIconType: setIconType, iconChange: onChange, readonly: readonly, displayFromIconfontCN: displayFromIconfontCN })
        ) : readonly ? modalStaticEl() : ModalEl
    );
};
exports['default'] = IconPicker;
module.exports = exports['default'];