import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import React from "react";
import style from "./style";

const TextContentEdit = (props) => {
  const buttonList = ["bold", "italic", "underline"];

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

const BasicPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.Typography {...props} showLineHeight isExpanded />
    <Tools.PositionPadding {...props} />
    <Tools.Alignment {...props} verticalAlign={false} textAlign />
    <Tools.Interactions
      label="Text Actions"
      {...props}
      onUpdate={(action) => console.log(action)}
    >
      <div />
    </Tools.Interactions>
  </div>
);

const Properties = (props) => (
  <Tools.PropertiesWindow
    {...props}
    defaultTab="basic"
    tabs={[{ id: "basic", title: "Text", component: BasicPropertiesTab }]}
  />
);

export default (props) => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";

  return (
    <div style={{ marginTop, textAlign }}>
      <TextContentEdit {...props} />
    </div>
  );
};