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, Tab, Segment } from 'semantic-ui-react';
import { useState } from 'react';
export function createTabArray(config) {
    var FLD = config.fieldControl;
    return function (props) {
        var onChange = props.onChange, value = props.value, ctlProps = __rest(props, ["onChange", "value"]);
        var _a = useState(0), activeIndex = _a[0], setActiveIndex = _a[1];
        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([
                {}
            ], values.slice(index)));
        };
        var handleOnRemove = function (index) {
            setValues(values.slice(0, index).concat(values.slice(index + 1)));
            if (index === (values.length - 1)) {
                setActiveIndex(index - 1);
            }
        };
        var _panes = values && values.map(function (v, i) {
            return {
                menuItem: v && v[config.nameField] || "#" + (i + 1),
                render: function () { return <Segment>
          {config.preventDelete !== true && <Button floated="right" icon="trash" negative onClick={function (a) { return handleOnRemove(i); }}/>}
          <FLD value={v} onChange={function (a) { return handleOnChange(a, i); }} {...ctlProps}/>
        </Segment>; }
            };
        }) || [];
        var panes = config.preventAdd !== true
            ? _panes.concat([{
                    menuItem: '+',
                    render: function () { return <span />; }
                }]) : _panes;
        var handleChange = function (event, d) {
            if (d.activeIndex !== undefined && typeof (d.activeIndex) === 'number') {
                if (d.activeIndex === (panes.length - 1)) {
                    handleOnAdd(panes.length);
                }
                setActiveIndex(d.activeIndex);
            }
        };
        return <Tab panes={panes} activeIndex={activeIndex} onTabChange={config.preventAdd !== true ? handleChange : function () { }}/>;
    };
}