import * as React from "react";
import * as Component from "@sc/plugins/webcomponents/v2";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";
import { EditorMode } from "@sc/modules/v2/Editor/types";

// const Component: any = {
//   Body: ({ children }) => <div>{children}</div>,
//   Text: () => <p>Text</p>,
//   Headline: () => <p>HEADLINE</p>,
// };

import { Menu, MenuItem, Button } from "@material-ui/core";
interface LoadComponentProps {
  /**
   * enum(LIVE,EDITOR)
   */
  mode?: EditorMode;

  /**
   * The name of the component that should be loaded
   */
  type: ComponentTypes;

  /**
   * The settings to pass along to the component
   */
  settings?: any;

  /**
   * Mobile responsive settings
   */
  rSettings?: object;

  /**
   * Whether or not the component is currently being dragged
   */
  // isDragInProgress?: Boolean;

  children?: React.ReactNode;
}

/**
 * (Formerly WebComponent) The react component used to interpret each item in the editor.
 */
export const LoadComponent: React.FC<LoadComponentProps> = ({
  mode = EditorMode.LIVE,
  // isDragInProgress = false,
  type,
  settings = {},
  children,
}) => {
  // const RenderedComponent: React.FC = Component[type];
  // return (
  //   <RenderedComponent {...settings} mode={mode}>
  //     {children}
  //   </RenderedComponent>
  // );
  // const components = Object.keys(ComponentTypes);

  return React.createElement(Component[type], {
    ...settings,
    children,
    mode,
  });
};

export default LoadComponent;