import * as React from "react";
import { triggerHook } from "@sc/plugins";

import WebComponent from "../WebComponent";
import { EditorMode } from "../../../v2/Editor/types";
import { CanvasProps } from "./types";

const Canvas: React.FC<CanvasProps> = (props) => {
  const [isDragInProgress, setIsDragInProgress] = React.useState<boolean>(
    false
  );

  const { pageContent, show } = props;

  const updateDragState = (val, callbackFn = () => false) => {
    setIsDragInProgress(val);
    callbackFn();
  };

  const getResponsiveSettings = (objSettings) => {
    const properties = objSettings.properties || false;
    const currentMobileState = props.getMobileState();

    let newSettings = objSettings;

    if (properties) {
      if (properties.hasOwnProperty("mobile")) {
        const fullscreen = properties.mobile.hasOwnProperty("fullscreen")
          ? properties.mobile.fullscreen
          : {};
        const desktop = properties.mobile.hasOwnProperty("desktop")
          ? properties.mobile.desktop
          : {};
        const tablet = properties.mobile.hasOwnProperty("tablet")
          ? properties.mobile.tablet
          : {};
        const smartphone = properties.mobile.hasOwnProperty("smartphone")
          ? properties.mobile.smartphone
          : {};

        if (currentMobileState.type === "smartphone") {
          newSettings = {
            ...objSettings,
            properties: {
              ...properties,
              ...fullscreen,
              ...desktop,
              ...tablet,
              ...smartphone,
            },
          };
        } else if (currentMobileState.type === "tablet") {
          newSettings = {
            ...objSettings,
            properties: {
              ...properties,
              ...smartphone,
              ...fullscreen,
              ...desktop,
              ...tablet,
            },
          };
        } else if (currentMobileState.type === "desktop") {
          newSettings = {
            ...objSettings,
            properties: {
              ...properties,
              ...smartphone,
              ...tablet,
              ...fullscreen,
              ...desktop,
            },
          };
        } else if (currentMobileState.type === "fullscreen") {
          newSettings = {
            ...objSettings,
            properties: {
              ...properties,
              ...smartphone,
              ...tablet,
              ...desktop,
              ...fullscreen,
            },
          };
        }
      }
    }

    return newSettings;
  };

  // recursively loop through content prop to display editor content
  // load the component & pass along props
  // along with the edit=true prop (that way component can show editor version)
  const generatePage = (content, parent = false) => {
    const node = [];

    let i = 0;

    let ecCoordinates = {
      top: false,
      right: false,
      bottom: false,
      left: false,
      width: false,
      height: false,
    };

    if (props.editorContainer) {
      const {
        top,
        right,
        bottom,
        left,
        width,
        height,
      } = props.editorContainer.getBoundingClientRect();
      ecCoordinates = { top, right, bottom, left, width, height };
    }

    content
      .filter((c) => c.parent === parent)
      .forEach((c) => {
        i += 1;

        const wcProps = {
          ...props,
          settings: c,
          rSettings: getResponsiveSettings(c),
          ecCoordinates,
          isDragInProgress,
          updateDragState,
          mode: EditorMode.EDITOR,
        };

        let internal = c.html || generatePage(content, c.id);
        const noChildList = ["input", "br", "img"];
        if (noChildList.indexOf(c.type.toLowerCase()) > -1) internal = null;

        node[i] = (
          <WebComponent
            triggerHook={triggerHook}
            mode="editor"
            {...wcProps}
            key={c.id}
            type={c.type}
          >
            {internal}
          </WebComponent>
        );
      });

    return node;
  };

  if (show === "preview") return generatePage(pageContent);

  return pageContent !== null ? generatePage(pageContent) : null;
};

export default Canvas;