import _extends from 'babel-runtime/helpers/extends';
import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import React, { useEffect, useState } from 'react';
import Popover from 'antd/es/popover';
import Button from 'antd/es/button';
import Badge from 'antd/es/badge';
import Icon from 'antd/es/icon';
import IconList from './IconList';
import * as FishxIcons from '@fishx/icons';
import { createFromIconfontCN } from '@fishx/icons';
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 = useState(value || defaultValue),
        _useState2 = _slicedToArray(_useState, 2),
        iconType = _useState2[0],
        setIconType = _useState2[1];

    var _useState3 = useState(false),
        _useState4 = _slicedToArray(_useState3, 2),
        showDot = _useState4[0],
        setShowDot = _useState4[1];

    var _useState5 = useState(''),
        _useState6 = _slicedToArray(_useState5, 2),
        currentColor = _useState6[0],
        setCurrentColor = _useState6[1];

    var _useState7 = useState(''),
        _useState8 = _slicedToArray(_useState7, 2),
        selectedColor = _useState8[0],
        setSelectedColor = _useState8[1];

    var Component = allIcons[iconType];
    var departmentIconList = React.useMemo(function () {
        return Object.keys(allIcons).filter(function (iconName) {
            return iconName.indexOf('P') === 0 && iconName.substring(1, 2).match(/^.*[A-Z]+.*$/);
        });
    }, []);
    var IconFont = createFromIconfontCN({
        scriptUrl: displayFromIconfontCN
    });
    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 React.createElement(
            'div',
            { onMouseLeave: function onMouseLeave() {
                    handleHover(false);
                }, style: { display: 'inline-block' } },
            React.createElement(
                Badge,
                { count: React.createElement(Icon, { 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();
                        } }) },
                React.createElement(
                    Button,
                    { className: 'cursor-pointer ' + className, style: style, onMouseEnter: function onMouseEnter() {
                            handleHover(true);
                        } },
                    !iconType ? placeholder || 'please select' : displayFromIconfontCN ? React.createElement(IconFont, { type: iconType, style: { color: selectedColor } }) : React.createElement(Component, { style: { color: selectedColor } })
                )
            )
        );
    };
    var ModalEl = React.createElement(
        Popover,
        { overlayClassName: overlayClassName || "defaultOverlay", overlayStyle: overlayStyle || { width: '319px' }, trigger: 'click', placement: 'topLeft', content: React.createElement(IconList, { dataSource: departmentIconList, currentIcon: iconType, setIconType: setIconType, iconChange: onChange, readonly: readonly, displayFromIconfontCN: displayFromIconfontCN, showColorSelect: showColorSelect, currentColor: currentColor, colorChange: setSelectedColor }) },
        modalStaticEl()
    );
    return React.createElement(
        React.Fragment,
        null,
        mode === 'inline' ? React.createElement(
            'div',
            { className: className, style: _extends(_extends({}, defaultStyle), style) },
            React.createElement(IconList, { dataSource: departmentIconList, currentIcon: iconType, setIconType: setIconType, iconChange: onChange, readonly: readonly, displayFromIconfontCN: displayFromIconfontCN })
        ) : readonly ? modalStaticEl() : ModalEl
    );
};
export default IconPicker;