import _ from "lodash";
import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import React from "react";
import { Divider } from "semantic-ui-react";

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

const BasicPropertiesTab = (props) => {
  // const { settings, updateComponentSettings, updateComponentStyle } = props;
  return (
    <div style={{ width: "100%" }}>
      <Tools.WidthHeight {...props} />
      <Tools.PositionPadding {...props} />
      <Tools.Alignment {...props} verticalAlign={false} marginAlign />
    </div>
  );
};

export default (props) => {
  const { settings } = props;
  const { properties } = settings;

  const marginTop = _.get(properties, "marginTop", 0);

  return (
    <div style={{ marginTop }}>
      <EditorObject {...props} PropertiesView={Properties}>
        <div style={{ ...properties, color: "pink", marginTop: 0 }}>
          <Divider />
        </div>
      </EditorObject>
    </div>
  );
};