import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import React, { useState, useEffect } from 'react';
import * as FishxIcons from '@fishx/icons';
import { createFromIconfontCN, PCheckOutlined } from '@fishx/icons';
import "@whalecloud/fdx-theme-fdx/icon-picker.less";
var allIcons = FishxIcons;
var IconList = function IconList(_ref) {
    var dataSource = _ref.dataSource,
        iconChange = _ref.iconChange,
        currentIcon = _ref.currentIcon,
        setIconType = _ref.setIconType,
        readonly = _ref.readonly,
        displayFromIconfontCN = _ref.displayFromIconfontCN,
        showColorSelect = _ref.showColorSelect,
        currentColor = _ref.currentColor,
        colorChange = _ref.colorChange;

    var ColorList = ['#E91E63', '#FF9700', '#4EAF50', '#07BCD4', '#2196F3', '#9E27B1', '#4051B5', '#455A63'];

    var _useState = useState(-1),
        _useState2 = _slicedToArray(_useState, 2),
        selectedColor = _useState2[0],
        setSelectedColor = _useState2[1];

    var _useState3 = useState(''),
        _useState4 = _slicedToArray(_useState3, 2),
        backgroundColor = _useState4[0],
        setBackgroundColor = _useState4[1];

    var _useState5 = useState(dataSource),
        _useState6 = _slicedToArray(_useState5, 2),
        renderData = _useState6[0],
        setRenderData = _useState6[1];

    var handleClick = function handleClick(index) {
        setBackgroundColor(ColorList[index]);
        colorChange(ColorList[index]);
        setSelectedColor(index);
        if (iconChange) iconChange({ name: currentIcon, color: ColorList[index] });
    };
    var IconFont = createFromIconfontCN({
        scriptUrl: displayFromIconfontCN
    });
    var Component = function Component(_ref2) {
        var type = _ref2.type;

        if (displayFromIconfontCN) {
            return React.createElement(IconFont, { type: type });
        } else {
            var FishIcon = allIcons[type];
            return React.createElement(FishIcon, null);
        }
    };
    useEffect(function () {
        if (displayFromIconfontCN) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", displayFromIconfontCN);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var pattern = /icon-(?:[A-z]|[0-9]|-|_)*/g;
                    setRenderData(xhr.response.match(pattern));
                }
            };
            xhr.send();
        }
    }, []);
    useEffect(function () {
        setBackgroundColor(currentColor);
        setSelectedColor(-1);
    }, [currentColor]);
    return React.createElement(
        'div',
        { className: 'listStyle' },
        showColorSelect ? React.createElement(
            'div',
            { style: { width: '100%' } },
            React.createElement(
                'ul',
                { className: 'colorUl' },
                ColorList.map(function (v, index) {
                    return React.createElement(
                        'div',
                        { style: { backgroundColor: v }, className: 'colorLi', onClick: function onClick() {
                                handleClick(index);
                            }, key: v },
                        index === selectedColor ? React.createElement(PCheckOutlined, { className: 'checkIcon' }) : null
                    );
                })
            )
        ) : null,
        renderData.map(function (v) {
            return React.createElement(
                'div',
                { key: v, className: v && currentIcon && v === currentIcon ? showColorSelect && backgroundColor ? 'activeColor' : 'active' : '', onClick: function onClick() {
                        if (readonly) return;
                        if (setIconType) setIconType(v);
                        if (iconChange) iconChange({ name: v, color: backgroundColor ? backgroundColor : '' });
                    }, style: v && currentIcon && v === currentIcon ? { backgroundColor: backgroundColor } : null },
                React.createElement(Component, { type: v })
            );
        })
    );
};
export default IconList;