import { createFormEditor } from "../crud-new/lib/FormEditor";
import { listCities, listUsers } from "./data";
import { createSearchField } from "../crud-new/lib/Search";
import * as React from 'react';
import { createSwitch } from "../crud-new/lib/Switch";
import { createArray } from "../crud-new/lib/Array";
import { StringFieldControl } from "../crud-new/lib/Input";
import { Grid, Divider, Button } from "semantic-ui-react";
import { useState, useEffect } from "react";
import { util_isDirty, util_getError } from "../crud-new/lib/_utils";
var cfg = {
    key: 'cf',
    columns: [
        {
            name: 'cf',
            inputType: 'string'
        },
        {
            name: 'name',
            inputType: 'string'
        },
        {
            name: 'surname',
            inputType: 'string',
            style: { width: '100%' }
        },
        {
            name: 'age',
            inputType: 'number'
        },
        {
            name: 'bornDate',
            inputType: 'date',
            label: 'Born Date'
        },
        {
            name: 'city',
            customControl: createSearchField({
                getData: function (f) { return listCities(f); },
                key: 'name',
            }),
            listRenderer: function (i, a) { return <span>i.city.name</span>; }
        },
        {
            name: 'role',
            customControl: createSwitch({ options: ['admin', 'guest', 'root'] })
        },
        {
            name: 'tags',
            customControl: createArray({
                fieldControl: StringFieldControl
            }),
            fluid: true,
            listRenderer: function (i, a) { return <span>{i.tags && i.tags.join(', ')}</span>; }
        }
    ],
    validation: function (i, s) {
        if (i.tags && i.tags.filter(function (t) { return t === null || t === undefined; }).length > 0) {
            s('tags', "There are some tags with empty values");
        }
    },
    formEditorRender: function (p) { return <Grid>
    <Grid.Row>
      <Grid.Column width={8}>
        {p.EditorCompo}
      </Grid.Column>
      <Grid.Column width={8}>
        <pre>{JSON.stringify({ item: p.item, errors: util_getError(p.item), dirty: util_isDirty(p.item) }, null, 2)}</pre>
      </Grid.Column>
    </Grid.Row>
    <Grid.Row>
      <Divider />
      {p.ErrorCompo}
    </Grid.Row>
  </Grid>; }
};
var Editor = createFormEditor(cfg);
export var FormEditorDemo = function (props) {
    var _a = useState(undefined), item = _a[0], setItem = _a[1];
    useEffect(function () {
        listUsers('').then(function (u) { return setItem(u[0]); });
    }, []);
    var dirty = util_isDirty(item) ? 'DIRTY' : 'CLEAN';
    return <div>
    <Editor value={item} onChange={function (i, e) { setItem(i); }} onSetError={console.error}/>
    <div> {dirty}</div>
    <Button content="reset" onClick={function () { return listUsers('').then(function (u) { return setItem(u[0]); }); }}/>
  </div>;
};