import { get } from "lodash";
import React from "react";
import { useDimensions } from "@sc/plugins/utilities";

import DragHandle from "./DragHandle";
import Debug from "./Debug";
import style, { Border } from "./style";

const Overlay = ({ width, height }) => {
  return (
    <div
      style={{
        position: "absolute",
        width,
        height,
        zIndex: 1,
      }}
    />
  );
};

const ObjectContentNoPreview = (props) => {
  const [ref, hoverBoundingRect] = useDimensions();
  const { children, settings, color, showOverlay } = props;

  if (get(props, "match.path", "").indexOf("preview") > -1)
    return props.children;

  return (
    <div ref={ref} style={{ textAlign: "left", ...props.style }}>
      {(get(settings, "state") === "hover" ||
        get(settings, "state") === "active") &&
      props.dragHandle &&
      props.show !== "preview" ? (
        <>
          <DragHandle {...props} showProperties={props.showProperties} />
          <Border
            borderSize={get(props, "borderSize")}
            show={get(props, "show")}
            settings={get(props, "settings")}
            color={get(props, "color")}
            state={get(settings, "state")}
          />
        </>
      ) : null}
      <div style={props.style}>
        {get(props, "debug") && <Debug {...props} />}
        {showOverlay && <Overlay {...hoverBoundingRect} />}
        {children}
      </div>
    </div>
  );
};

export const ObjectContent = React.memo((props) => {
  if (get(props, "match.path", "").indexOf("preview") > -1)
    return props.children;
  return <ObjectContentNoPreview {...props} />;
});