import * as React from "react";
import EditorObject from "@sc/modules/page/Builder/EditorObject";

import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import { PluginProps } from "./types";
import { List } from "./live";
import Properties from "./Properties";

/**
 * Ability to create bulleted list
 */
export const EditorList: React.FC<PluginProps> = (props) => {
  const { id, mode, settings } = props;
  const properties = convertProperties(settings.properties);

  return (
    <V1ObjectWrapper settings={settings} showOverlay={true}>
      <EditorObject
        label="Bullet Points"
        id={id}
        {...props}
        PropertiesView={Properties}
        // debug
      >
        <List {...settings} style={properties} />
      </EditorObject>
    </V1ObjectWrapper>
  );
};

export default EditorList;