'use strict';

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

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var FishxIcons = _interopRequireWildcard(_icons);

require('@whalecloud/fdx-theme-fdx/icon-picker.less');

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 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 = (0, _react.useState)(-1),
        _useState2 = (0, _slicedToArray3['default'])(_useState, 2),
        selectedColor = _useState2[0],
        setSelectedColor = _useState2[1];

    var _useState3 = (0, _react.useState)(''),
        _useState4 = (0, _slicedToArray3['default'])(_useState3, 2),
        backgroundColor = _useState4[0],
        setBackgroundColor = _useState4[1];

    var _useState5 = (0, _react.useState)(dataSource),
        _useState6 = (0, _slicedToArray3['default'])(_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 = (0, _icons.createFromIconfontCN)({
        scriptUrl: displayFromIconfontCN
    });
    var Component = function Component(_ref2) {
        var type = _ref2.type;

        if (displayFromIconfontCN) {
            return _react2['default'].createElement(IconFont, { type: type });
        } else {
            var FishIcon = allIcons[type];
            return _react2['default'].createElement(FishIcon, null);
        }
    };
    (0, _react.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();
        }
    }, []);
    (0, _react.useEffect)(function () {
        setBackgroundColor(currentColor);
        setSelectedColor(-1);
    }, [currentColor]);
    return _react2['default'].createElement(
        'div',
        { className: 'listStyle' },
        showColorSelect ? _react2['default'].createElement(
            'div',
            { style: { width: '100%' } },
            _react2['default'].createElement(
                'ul',
                { className: 'colorUl' },
                ColorList.map(function (v, index) {
                    return _react2['default'].createElement(
                        'div',
                        { style: { backgroundColor: v }, className: 'colorLi', onClick: function onClick() {
                                handleClick(index);
                            }, key: v },
                        index === selectedColor ? _react2['default'].createElement(_icons.PCheckOutlined, { className: 'checkIcon' }) : null
                    );
                })
            )
        ) : null,
        renderData.map(function (v) {
            return _react2['default'].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 },
                _react2['default'].createElement(Component, { type: v })
            );
        })
    );
};
exports['default'] = IconList;
module.exports = exports['default'];