"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var map = require('lodash/map');
var reduce = require('lodash/reduce');
var FaClose = require('react-icons/lib/fa/close');
var styled_components_1 = require("styled-components");
var __1 = require("../../../../");
var ActionButton = styled_components_1.default(__1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcolor: ", ";\n"], ["\n\tcolor: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.text.light;
});
var handleChange = function (func) {
    return function (_a) {
        var value = _a.target.value;
        return func(value);
    };
};
var PatternPropertiesField = (function (_super) {
    __extends(PatternPropertiesField, _super);
    function PatternPropertiesField(props) {
        var _this = _super.call(this, props) || this;
        _this.handleKeyChange = function (key) {
            return function (_a) {
                var value = _a.target.value;
                var keys = _this.state.keys;
                var index = keys.indexOf(key);
                if (index > -1) {
                    keys[index] = value;
                }
                else {
                    keys.push(value);
                }
                _this.props.onKeyChange(key)(value);
                _this.setState({ keys: keys });
            };
        };
        var keys = Object.keys(props.formData || {});
        _this.state = {
            keys: keys
        };
        return _this;
    }
    PatternPropertiesField.prototype.render = function () {
        var _this = this;
        var _a = this.props, formData = _a.formData, schema = _a.schema;
        if (!schema.patternProperties) {
            return null;
        }
        var pattern = Object.keys(schema.patternProperties)[0];
        var tableData = reduce(formData, function (carry, value, key) {
            if (!schema.properties || !schema.properties[key]) {
                carry.push({
                    value: value,
                    key: key
                });
            }
            return carry;
        }, []);
        tableData.sort(function (a, b) {
            var indexA = _this.state.keys.indexOf(a.key);
            var indexB = _this.state.keys.indexOf(b.key);
            if (indexA === -1) {
                return 1;
            }
            return _this.state.keys.indexOf(a.key) - _this.state.keys.indexOf(b.key);
        });
        tableData.push({ value: '', key: '' });
        var subSchema = schema.patternProperties[pattern];
        return (React.createElement("table", null,
            React.createElement("thead", null,
                React.createElement("tr", null,
                    React.createElement("th", null, "Key"),
                    React.createElement("th", null, subSchema.title || 'Value'))),
            React.createElement("tbody", null, map(tableData, function (item, index) {
                var isLast = index + 1 === tableData.length;
                return (React.createElement("tr", { key: index },
                    React.createElement("td", null,
                        React.createElement(__1.Input, { value: item.key, className: "rendition-form-pattern-properties__key-field", disabled: isLast, pattern: pattern, placeholder: 'Key', onChange: _this.handleKeyChange(item.key) })),
                    React.createElement("td", null,
                        React.createElement(__1.Input, { value: item.value, id: "foo", className: "rendition-form-pattern-properties__value-field", placeholder: subSchema.title || 'Value', onChange: handleChange(_this.props.onPropertyChange(item.key)) }),
                        !isLast && (React.createElement(ActionButton, { type: "button", className: "rendition-form-pattern-properties__remove-field", plaintext: true, mb: 2, mt: 1, px: 1, ml: 1, onClick: _this.props.onDropPropertyClick(item.key) },
                            React.createElement(FaClose, null))))));
            }))));
    };
    return PatternPropertiesField;
}(React.Component));
exports.default = PatternPropertiesField;
var templateObject_1;
