"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var fa_1 = require("react-icons/lib/fa");
var styled_components_1 = require("styled-components");
var _1 = require("../../../../");
var WarningField_1 = require("../WarningField");
var ArrayFieldTitle = function (_a) {
    var TitleField = _a.TitleField, idSchema = _a.idSchema, required = _a.required, title = _a.title;
    if (!title) {
        return null;
    }
    var id = idSchema.$id + "__title";
    return React.createElement(TitleField, { id: id, title: title, required: required });
};
var ArrayFieldDescription = function (_a) {
    var DescriptionField = _a.DescriptionField, idSchema = _a.idSchema, description = _a.description;
    if (!description) {
        return null;
    }
    var id = idSchema.$id + "__description";
    return React.createElement(DescriptionField, { id: id, description: description });
};
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;
});
exports.default = (function (props) {
    var warning = props.uiSchema['ui:warning'];
    return (React.createElement("div", { className: props.uiSchema.classNames },
        React.createElement(ArrayFieldTitle, { TitleField: props.TitleField, idSchema: props.idSchema, title: props.uiSchema['ui:title'] || props.title, required: props.required }),
        !!warning && React.createElement(WarningField_1.WarningField, { warning: warning }),
        React.createElement(ArrayFieldDescription, { DescriptionField: props.DescriptionField, idSchema: props.idSchema, description: props.uiSchema['ui:description'] || props.schema.description }),
        props.items.map(function (element) {
            return (React.createElement("div", { className: "rendition-form__array-item", key: element.index },
                React.createElement(_1.Flex, null,
                    React.createElement(_1.Box, { flex: "1" }, element.children),
                    props.items.length > 1 && (React.createElement(ActionButton, { className: "rendition-form-array-item__move-up", mb: "6px", px: 1, ml: 1, plaintext: true, disabled: element.disabled || element.readonly || !element.hasMoveUp, onClick: element.onReorderClick(element.index, element.index - 1) },
                        React.createElement(fa_1.FaArrowUp, null))),
                    props.items.length > 1 && (React.createElement(ActionButton, { className: "rendition-form-array-item__move-down", mb: "6px", px: 1, ml: 1, plaintext: true, disabled: element.disabled || element.readonly || !element.hasMoveDown, onClick: element.onReorderClick(element.index, element.index + 1) },
                        React.createElement(fa_1.FaArrowDown, null))),
                    element.hasRemove && (React.createElement(ActionButton, { className: "rendition-form-array-item__remove-item", plaintext: true, mb: "6px", px: 1, ml: 1, disabled: element.disabled || element.readonly, onClick: element.onDropIndexClick(element.index) },
                        React.createElement(fa_1.FaClose, null))))));
        }),
        props.canAdd && (React.createElement(_1.Button, { className: "rendition-form-array-item__add-item", iconElement: React.createElement(fa_1.FaPlus, null), onClick: props.onAddClick }, "Add item"))));
});
var templateObject_1;
