import _toConsumableArray from "babel-runtime/helpers/toConsumableArray";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React, { Component } from "react";
import { Tag, Row, Col } from '@whalecloud/fdx';
import "./index.less";

var SkuFilter = function (_Component) {
    _inherits(SkuFilter, _Component);

    function SkuFilter() {
        _classCallCheck(this, SkuFilter);

        return _possibleConstructorReturn(this, (SkuFilter.__proto__ || Object.getPrototypeOf(SkuFilter)).apply(this, arguments));
    }

    _createClass(SkuFilter, [{
        key: "removeCondition",
        value: function removeCondition(item) {
            var _props = this.props,
                onRemove = _props.onRemove,
                conditions = _props.conditions;

            var newDatas = conditions.filter(function (el) {
                return el.id !== item.id;
            });
            onRemove && onRemove([].concat(_toConsumableArray(newDatas)), item);
        }
    }, {
        key: "clearAll",
        value: function clearAll() {
            this.props.onClear && this.props.onClear();
        }
    }, {
        key: "render",
        value: function render() {
            var _this2 = this;

            var _props2 = this.props,
                conditions = _props2.conditions,
                label = _props2.label,
                clearBtnLabel = _props2.clearBtnLabel;

            var hasConditions = conditions && conditions.length > 0;
            var template = React.createElement("div", null);
            if (hasConditions) {
                template = React.createElement(
                    Row,
                    { className: "sku-filter" },
                    React.createElement(
                        Col,
                        null,
                        React.createElement(
                            Row,
                            null,
                            React.createElement(
                                Col,
                                null,
                                React.createElement(
                                    "div",
                                    { className: "filter-container" },
                                    React.createElement(
                                        Row,
                                        null,
                                        React.createElement(
                                            Col,
                                            { className: "label-container" },
                                            React.createElement(
                                                "span",
                                                null,
                                                label
                                            )
                                        ),
                                        React.createElement(
                                            Col,
                                            { span: 20 },
                                            conditions.map(function (item) {
                                                return React.createElement(
                                                    "div",
                                                    { className: "tag-container", key: item.id },
                                                    React.createElement(
                                                        Tag,
                                                        { closable: true, visible: true, onClose: function onClose() {
                                                                _this2.removeCondition(item);
                                                            } },
                                                        item.label
                                                    )
                                                );
                                            }),
                                            React.createElement(
                                                "span",
                                                { className: "clear-all-text", onClick: function onClick() {
                                                        _this2.clearAll();
                                                    } },
                                                clearBtnLabel
                                            )
                                        )
                                    )
                                )
                            )
                        )
                    )
                );
            }
            return template;
        }
    }]);

    return SkuFilter;
}(Component);

export default SkuFilter;

SkuFilter.defaultProps = {
    label: "Filtered By:",
    clearBtnLabel: "Clear All"
};