import React, { Fragment } from 'react';
import GetWidgetData from '@webaholics/one-app-core/client/OnePlugin/WidgetData/GetWidgetData';
import SaveWidgetData from '@webaholics/one-app-core/client/OnePlugin/WidgetData/SaveWidgetData';
import RemoveWidgetData from '@webaholics/one-app-core/client/OnePlugin/WidgetData/RemoveWidgetData';

let attribute = '';
let data = '';
let groupId = '';
const onAttributeChange = (e) => {
  attribute = e.target.value;
};
const onDataChange = (e) => {
  data = e.target.value;
};
const onGroupIdChange = (e) => {
  groupId = e.target.value;
};
const DataBasePreview = () => (
  <div>
    <h3>Add some data to the data base</h3>
    <table>
      <tbody>
        <tr>
          <td>Attribute</td>
          <td>Data</td>
          <td>GroupId</td>
        </tr>
        <tr>
          <td>
            <input onChange={onAttributeChange} />
          </td>
          <td>
            <input onChange={onDataChange} />
          </td>
          <td>
            <input onChange={onGroupIdChange} />
          </td>
        </tr>
        <tr>
          <td>
            <SaveWidgetData>
              {(saveData) => {
                const submit = () => {
                  if (attribute && data) {
                    saveData({ data: [{ data, attribute }], groupId });
                  }
                };
                return <button onClick={submit} type="submit">Add Data</button>;
              }}
            </SaveWidgetData>
          </td>
        </tr>
        <GetWidgetData>
          {widgetData => widgetData.map(wData => (
            <tr key={wData.attribute + wData.groupId}>
              <RemoveWidgetData
                attribute={wData.attribute}
                groupId={wData.groupId}
              >
                {remove => (
                  <Fragment>
                    <td>{wData.attribute}</td>
                    <td>{wData.data}</td>
                    <td>{wData.groupId}</td>
                    <td>
                      <button onClick={remove} type="button">Remove</button>
                    </td>
                  </Fragment>
                )}
              </RemoveWidgetData>
            </tr>
          ))
          }
        </GetWidgetData>
      </tbody>
    </table>
  </div>
);

export default DataBasePreview;