var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import * as React from 'react';
import { Button, Form, Divider } from 'semantic-ui-react';
import { useState, useEffect } from 'react';
import { util_setDirty, util_setGenericError, util_setClean, util_getError, util_isDirty } from './_utils';
import { createFormEditor } from './FormEditor';
import { createJSONEditor } from './JSONEditor';
export var createCrudFormEditor = function (cfg) {
    var NormalEditor = createFormEditor(cfg);
    var JSONEditor = createJSONEditor({});
    var getFormEditor = function (mode, jsonStyle) { return mode === 'json'
        ? function (p) { return <JSONEditor {...p} style={__assign({ width: '100%', height: 600 }, jsonStyle)}/>; }
        : NormalEditor; };
    var Editor = function (props) {
        var _a = useState(undefined), item = _a[0], setItem = _a[1];
        var _b = useState({}), initialItem = _b[0], setInitialItem = _b[1];
        var _c = useState('normal'), mode = _c[0], setMode = _c[1];
        var isNew = props.id === 'new';
        useEffect(function () {
            if (isNew) {
                if (cfg.getNewItem) {
                    cfg.getNewItem().then(function (i) {
                        var dirtyItem = util_setDirty(i);
                        setItem(dirtyItem);
                        setInitialItem(dirtyItem);
                    });
                }
                else {
                    var dirtyItem = util_setDirty({});
                    setItem(dirtyItem);
                    setInitialItem(dirtyItem);
                }
            }
            else {
                if (cfg.getItemById) {
                    cfg.getItemById(props.id)
                        .then(function (item) {
                        var cleanItem = util_setClean(item);
                        setInitialItem(cleanItem);
                        setItem(cleanItem);
                    })
                        .catch(function (err) {
                        var errItem = util_setGenericError({}, err.message || JSON.stringify(err), true);
                        setInitialItem(errItem);
                        setItem(errItem);
                    });
                }
            }
        }, [props.id]);
        var onSave = function () {
            if (isNew && cfg.insertItem && item) {
                cfg.insertItem(item)
                    .then(function (i) {
                    props.didSave(i[cfg.key]);
                    setItem(util_setClean(i));
                })
                    .catch(function (err) {
                    var errItem = util_setGenericError(item, err.message || JSON.stringify(err));
                    setItem(errItem);
                });
            }
            else if (!isNew && cfg.updateItem && item) {
                cfg.updateItem(props.id, item)
                    .then(function (i) {
                    props.didSave(i[cfg.key]);
                    setItem(util_setClean(i));
                })
                    .catch(function (err) {
                    var errItem = util_setGenericError(item, err.message || JSON.stringify(err));
                    setItem(errItem);
                });
            }
        };
        var onCancel = function () {
            var cleanOrDirty = isNew ? util_setDirty(initialItem) : util_setClean(initialItem);
            setItem(cleanOrDirty);
        };
        var err = util_getError(item);
        var dirty = util_isDirty(item);
        var StandardMenu = <>
      {props.didQuit && <Button disabled={!err.hasBlockingError && (dirty || err.hasError)} primary title="Go back" icon="chevron left" content="Back" onClick={props.didQuit}/>}
      <Button disabled={!dirty || err.hasError || err.hasBlockingError} primary icon="save" content="Save" onClick={onSave}/>
      <Button disabled={err.hasBlockingError} title="Cancel" secondary icon="cancel" content="Cancel" onClick={onCancel}/>

      {cfg.hideSwitchModeToggle !== true && <Button.Group floated="right">
        <Button title="Normal" icon="file" primary={mode === 'normal'} onClick={function () { return setMode('normal'); }}/>
        <Button title="JSON" icon="code" primary={mode === 'json'} onClick={function () { return setMode('json'); }}/>
      </Button.Group>}
    </>;
        var FormEditor = getFormEditor(mode, props.JSONEditorStyle);
        if (cfg.crudEditorRender) {
            return cfg.crudEditorRender({
                MenuCompo: StandardMenu,
                FormEditorCompo: item && <Form>
          <FormEditor value={item} onChange={setItem} onSetError={function (e) { }}/>
        </Form>,
                item: item
            });
        }
        else {
            return <>
        {StandardMenu}
        <Divider />
        {item && <Form>
          <FormEditor value={item} onChange={setItem} onSetError={function (e) { }}/>
        </Form>}
      </>;
        }
    };
    return Editor;
};