import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import React from "react";
import { ContainerContent } from "./component";
import settings from "./settings";

const CURSOR_ID = 1111;

const ContainerEdit = (props) => {
  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 && !props.settings.properties.hasOwnProperty("padding")
      ? { padding: 20 }
      : { padding: props.settings.properties.padding };

  return (
    <EditorObject
      {...props}
      style={{ height: "100%", display: "block" }}
      PropertiesView={Properties}
      color="#AAA"
    >
      <ContainerContent {...props} style={defaultStyle} />
    </EditorObject>
  );
};

const BasicPropertiesTab = (props) => (
  <div style={{ width: "100%" }}>
    <Tools.Background
      {...props}
      accept="image/jpeg, image/png, video/mp4, video/ogg"
      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>
);

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

const Component = (props) => (
  <div
    style={{
      ...props.settings.properties,
      justifyContent: "normal",
      display: "block",
      padding: 0,
      height: props.settings.properties.height || "inherit",
      width: props.settings.properties.width || "100%",
      marginTop: props.settings.properties.marginTop || 0,
    }}
  >
    <ContainerEdit {...props} />
  </div>
);

export const Container = {
  settings,
  component: Component,
};