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

const HeadlineContentEdit = (props) => {
  const { settings } = props;
  const buttonList = ["bold", "italic", "underline"];
  const padding = settings.properties ? settings.properties.padding : 0;
  const display = settings.properties
    ? settings.properties.display
    : "inline-block";

  // const width = "100%";
  // const maxWidth = get(settings.properties, "width", "inherit");

  return (
    <EditorObject {...props} style={{ display }} PropertiesView={Properties}>
      <h1 style={{ padding }}>
        <span
          style={{
            ...style.content,
            ...props.settings.properties,
            marginTop: 0,
            padding: 0,
            // width,
            // maxWidth,
          }}
        >
          <Tools.RichEditor
            {...props}
            buttonList={buttonList}
            content={props.settings.html || "Enter Your Headline Here"}
            disabled={props.match.path.indexOf("preview") > -1}
          />
        </span>
      </h1>
    </EditorObject>
  );
};

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 }}>
      <HeadlineContentEdit {...props} />
    </div>
  );
};

const BasicPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.Typography {...props} showLineHeight isExpanded />
    <Tools.PositionPadding {...props} />
    <Tools.Alignment {...props} verticalAlign={false} textAlign />
  </div>
);

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