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 ReactJson from "react-json-view";
import { ContainerContent } from "./component";
import V1ObjectWrapper, { convertProperties } from "../../v2/V1ObjectWrapper";

const CURSOR_ID = 1111;

const ContainerEdit = (props) => {
  const properties = convertProperties(props.settings.properties);

  const childContent = props.pageContent.filter(
    (itm) => itm.parent === props.settings.id
  );
  let isEmpty = false;
  if (childContent.length) {
    isEmpty = !!(childContent.length === 1 && childContent[0].id === CURSOR_ID);
  } else isEmpty = true;

  const defaultStyle =
    isEmpty && !properties.hasOwnProperty("padding")
      ? { padding: 20 }
      : { padding: properties.padding };

  return (
    <EditorObject
      {...props}
      style={{
        height: "100%",
        display: "block",
      }}
      PropertiesView={Properties}
      color="#AAA"
    >
      <ContainerContent
        {...props}
        style={{
          ...defaultStyle,
          backgroundColor: get(properties, "backgroundColor"),
          backgroundImage: get(properties, "backgroundImage"),
          backgroundSize: get(properties, "backgroundSize"),
          backgroundPosition: get(properties, "backgroundPosition"),
          backgroundRepeat: get(properties, "backgroundRepeat"),
          borderWidth: get(properties, "borderWidth"),
          borderStyle: get(properties, "borderStyle"),
          borderColor: get(properties, "borderColor"),
          boxShadow: get(properties, "boxShadow"),
          shadowColor: get(properties, "shadowColor"),
          shadowOffset: get(properties, "shadowOffset"),
          shadowRadius: get(properties, "shadowRadius"),
        }}
      />
    </EditorObject>
  );
};

const BasicPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.Background
      {...props}
      accept="image/jpeg, image/png, video/mp4, video/ogg"
      showAlpha
      isExpanded
    />
    <Tools.WidthHeight {...props} />
    <Tools.PositionPadding {...props} />
    <Tools.Alignment {...props} verticalAlign={false} marginAlign />
  </div>
);

const AdvancedPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.BordersShadow {...props} isExpanded />
    <Tools.Interactions label="Container Actions" {...props}>
      <div />
    </Tools.Interactions>
  </div>
);

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

export default (props) => {
  let settings = props.settings;
  // delete settings.properties.maxWidth;

  settings.properties.maxWidth = settings.properties.width;
  settings.properties.width = "100%";

  return (
    <V1ObjectWrapper settings={settings}>
      <ContainerEdit {...props} settings={settings} />
    </V1ObjectWrapper>
  );
};