var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import * as React from 'react';
import { Button, List } from 'semantic-ui-react';
export function createArray(config) {
    var FLD = config.fieldControl;
    return function (props) {
        var onChange = props.onChange, value = props.value, ctlProps = __rest(props, ["onChange", "value"]);
        var values = value || [];
        var setValues = onChange;
        var handleOnChange = function (value, index) {
            setValues(values.slice(0, index).concat([
                value
            ], values.slice(index + 1)));
        };
        var handleOnAdd = function (index) {
            setValues(values.slice(0, index).concat([
                undefined
            ], values.slice(index)));
        };
        var handleOnRemove = function (index) {
            setValues(values.slice(0, index).concat(values.slice(index + 1)));
        };
        return <List>
      <List.Item>
        {(!values || values.length == 0) && <List.Content floated='right'>
          <Button icon="plus" primary onClick={function () { return handleOnAdd(values.length); }}/>
        </List.Content>}
      </List.Item>
      {values && values.map(function (v, i) {
            return <List.Item key={i}>
          <List.Content floated='right'>
            {config.preventAdd !== true && <Button icon="plus" primary onClick={function () { return handleOnAdd(i + 1); }}/>}
            {config.preventDelete !== true && <Button icon="trash" negative onClick={function (a) { return handleOnRemove(i); }}/>}
          </List.Content>
          <List.Content>
            <FLD value={v} onChange={function (a) { return handleOnChange(a, i); }} {...ctlProps}/>
          </List.Content>
        </List.Item>;
        })}
    </List>;
    };
}