import * as React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import { Divider, Segment, Grid, Menu } from 'semantic-ui-react';
import { listUsers, getUser, listCities, deleteUser, insertUser, updateUser } from './data';
import { createSearchField } from '../crud-new/lib/Search';
import { createSwitch } from '../crud-new/lib/Switch';
import { createArray } from '../crud-new/lib/Array';
import { StringFieldControl } from '../crud-new/lib/Input';
import { setDebugMode } from '../crud-new/lib/_utils';
import { createCrudRouter } from '../crud-new/createRouter';
import { createDropdown } from '../../src/crud-new/lib/Dropdown';
import { createDropdownTextMulti } from '../../src/crud-new/lib/DropdownTextMulti';
import { createTabArray } from '../../src/crud-new/lib/TabArray';
import { createJSONEditor } from '../../src/main';
import { createRichTextEditor } from '../../src/crud-new/lib/RichTextEditor';
setDebugMode(true);
var definition = {
    key: 'cf',
    path: 'user',
    columns: [
        {
            name: 'cf',
            inputType: 'string'
        },
        {
            name: 'name',
            inputType: 'string'
        },
        {
            name: 'notes',
            inputType: 'multilinestring',
            style: { height: 80 },
            skipList: true,
        },
        {
            name: 'notes',
            customControl: createRichTextEditor({
                richEditorProps: {
                    mode: 'text',
                    setOptions: { showLineNumbers: false }
                }
            }),
            style: { height: 80 },
            skipList: true,
        },
        {
            name: 'surname',
            inputType: 'string',
            style: { width: '100%' }
        },
        {
            name: 'age',
            inputType: 'number'
        },
        {
            name: 'bornDate',
            inputType: 'date',
            label: 'Born Date',
            size: 'mini'
        },
        { name: "admin", inputType: 'boolean' },
        {
            name: 'idBornCity',
            customControl: createDropdown({
                useOnlyKey: true,
                key: 'id',
                getData: function (f) { return listCities(f); },
                display: function (i) { return i.name; }
            }),
            skipList: true,
        },
        {
            name: 'city',
            customControl: createSearchField({
                getData: function (f) { return listCities(f); },
                key: 'name',
                resultRenderer: function (i) { return <span>{i.name} <i>({i.region.name})</i></span>; }
            }),
            listRenderer: function (i, a) { return <span>{i.city.name}</span>; }
        },
        {
            name: 'city',
            customControl: createDropdown({
                key: 'id',
                getData: function (f) { return listCities(f); },
                display: function (i) { return i.name; }
            }),
            skipList: true
        },
        {
            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>; }
        },
        /*
        {
          name: 'otherCities',
          customControl: createDropdownMulti<City, City>({
            key: 'id',
            getData: f => listCities(f),
            display: u => u.name,
          }),
          skipList: true,
          fluid: true
        },
       /* {
          name: 'otherCitiNames',
          customControl: createDropdownMulti<string, City>({
            key: 'id',
            useOnlyKey: true,
            getData: f => listCities(f),
            display: u => u.name,
          }),
          skipList: true,
          fluid: true
        },*/
        {
            name: 'tags',
            customControl: createDropdownTextMulti({
                getData: function (f) { return Promise.resolve(['tag1', 'tag2', 'tag3']); },
                allowNew: true
            }),
            fluid: true,
            listRenderer: function (i, a) { return <span>{i.tags && i.tags.join(', ')}</span>; }
        },
        {
            name: 'otherCities',
            customControl: createTabArray({
                fieldControl: createJSONEditor({}),
                nameField: 'name'
            }),
            skipList: true,
            fluid: true
        },
    ],
    listItems: function (o) { return listUsers(o.filter); },
    getItemById: getUser,
    insertItem: insertUser,
    updateItem: updateUser,
    deleteItemById: deleteUser,
    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");
        }
        if (!i.otherCities || i.otherCities.length === 0) {
            s('otherCities', 'You must have at least one other city');
        }
    },
    formEditorRender: function (p) { return <Grid>
    <Grid.Row>
      <Grid.Column width={10}>
        {p.EditorCompo}
      </Grid.Column>
      <Grid.Column width={6} textAlign="center">
        <Segment basic textAlign="left">
          {p.ErrorCompo}
        </Segment>
        <pre>
          {JSON.stringify(p.item, null, 2)}
        </pre>
      </Grid.Column>
    </Grid.Row>
  </Grid>; },
    crudEditorRender: function (p) { return <Segment>
    <Segment inverted>
      {p.MenuCompo}
    </Segment>

    <Divider />
    {p.FormEditorCompo}
  </Segment>; }
};
var Routes = createCrudRouter([definition]);
export var DemoApp = function () {
    return <div>
    <h1>Crud Example</h1>
    <Router>
      <Segment>
        <Menu>
          <Menu.Item as={Link} to="/user">Users</Menu.Item>
          <Menu.Item as={Link} to="/user/212f45">Antonio</Menu.Item>
          <Menu.Item as={Link} to="/user/12a45a">Andrea</Menu.Item>
        </Menu>

        <Divider></Divider>
        <Routes />
        <Divider />
      </Segment>
    </Router>
  </div>;
};