import * as React from "react";
import * as Tools from "@sc/modules/page/Builder/Properties";
import { Text } from "./live";

import EditorObject from "@sc/modules/page/Builder/EditorObject";
import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";
import { PluginProps } from "./types";
import { get } from "lodash";

import textSettings from "./settings";

const Properties = (props) => {
  const { properties } = textSettings;
  return <PropertiesBuilder data={properties} {...props} />;
};

export const EditorText: React.FC<PluginProps> = (props) => {
  const { mode, id, settings } = props;

  const buttonList = ["bold", "italic", "underline"];

  const marginTop = get(settings, "properties.marginTop", 0);
  const textAlign = get(settings, "properties.textAlign", "inherit");

  return (
    <div
      style={{
        marginTop,
        textAlign,
      }}
    >
      <EditorObject id={id} {...props} PropertiesView={Properties}>
        {/* <Text {...settings}> */}
        <div style={{ ...settings.properties, marginTop: 0 }}>
          <span
            style={{
              cursor: "text",
              display: "inline-block",
            }}
          >
            <Tools.RichEditor
              {...props}
              position="top"
              buttonList={buttonList}
              content={settings.html || "Enter Content Here"}
              disabled={get(props, "match.path", "").indexOf("preview") > -1}
            />
          </span>
          {/* </Text> */}
        </div>
      </EditorObject>
    </div>
  );
};

export default EditorText;