import * as React from "react";
import { get } from "lodash";
import EditorObject from "@sc/modules/page/Builder/EditorObject";

import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import { PluginProps } from "./types";
import { Navigation } from "./live";
import { Links } from "./Links";
import Properties from "./Properties";
import { EditorMode } from "@sc/modules/v2/Editor/types";

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

  return (
    <V1ObjectWrapper settings={settings} showOverlay={true}>
      <EditorObject
        label="Links"
        id={id}
        {...props}
        PropertiesView={Properties}
        // debug
      >
        {/* <Navigation {...settings} style={properties} /> */}
        <Links
          items={data.map((itm) => ({ ...itm, type: itm.linkDisplayType }))}
          linkStyle={{ ...get(settings, "linkStyle", {}) }}
          layoutStyle={layoutStyle}
          mode={EditorMode.EDITOR}
        />
      </EditorObject>
    </V1ObjectWrapper>
  );
};

export default EditorList;