import React, { Component } from 'react';

import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal'; // EditBlock
import InlineForm from '@plone/volto/components/manage/Form/InlineForm';

import { SplitterSchema } from './schema';
import SplitterView from './SplitterView';

class SplitterEdit extends Component {
  render() {
    const schema = SplitterSchema();
    return (
      <>
        <SplitterView data={this.props.data} />

        <SidebarPortal selected={this.props.selected}>
          <InlineForm
            schema={schema}
            title={schema.title}
            onChangeField={(id, value) => {
              this.props.onChangeBlock(this.props.block, {
                ...this.props.data,
                [id]: value,
              });
            }}
            formData={this.props.data}
          />
        </SidebarPortal>
      </>
    );
  }
}

export default SplitterEdit;