import * as React from "react";
import * as Tools from "@sc/modules/page/Builder/Properties";
import { Headline } 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 headlineSettings from "./settings";

const Properties = (props) => {
  const { properties } = headlineSettings;
  return <PropertiesBuilder data={properties} {...props} />;
};
export const EditorHeadline: 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
        title="Headline"
        id={id}
        {...props}
        PropertiesView={Properties}
      >
        {/* <Headline {...settings}> */}
        <h1 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>
          {/* </Headline> */}
        </h1>
      </EditorObject>
    </div>
  );
};

export default EditorHeadline;