import React from "react";
import Canvas from "@sc/modules/page/Builder/Canvas";
// import _ from "lodash";

import { settings01 } from "@sc/plugins/misc/v2/blocks/weblayouts/Benefits";
import { buildContentData } from "@sc/modules/page/Builder/Builder.stories";

import {
  // defaultCursorContent,
  // addThisAfterThat,
  // recursivelyRemoveItem,
  removeItem,
  duplicateItem,
  moveThisByThat,
  addHoverCursor,
  // generateContent,
  // generateSections,
  updateContent,
  updateComponentStyle,
  updateComponentSettings,
  setActiveObject,
  doUndoRedo,
  changeState,
  // resizeObject,
  setCanDrag,
  listAncestors,
  // listChildren,
  listComponents,
} from "@sc/modules/v2/Editor/actions";

export const mobileStateData = {
  desktop: {
    type: "desktop",
    dimensions: {
      maxWidth: 1000,
      minHeight: "70vh",
      margin: "80px auto",
      overflow: "hidden",
    },
  },
  fullscreen: {
    type: "fullscreen",
    dimensions: {
      width: "100%",
      height: "100vh",
      marginTop: 57,
    },
  },
};

const Test = () => {
  const content = buildContentData([settings01.default]);

  const editorProps = {
    hidden: false,
    content: "edit",
    removeItem,
    duplicateItem,
    moveThisByThat,
    addHoverCursor,
    changeState,
    // state,
    updateContent,
    updateComponentStyle,
    updateComponentSettings,
    listAncestors,
    listComponents,
    setActiveObject,
    doUndoRedo,
    // undoStackSize: this.state.undoStack.length - 1,
    // undoPosition: this.state.undoPosition,
    // setMobileState: this.setMobileState,
    // getMobileState: this.getMobileState,
    // setActivePropertyWindows: this.setActivePropertyWindows,
    // getActivePropertyWindows: this.getActivePropertyWindows,
    setCanDrag,
    getCanDrag: () => null,
  };

  return (
    <div>
      <Canvas
        pageContent={content}
        getMobileState={() => ({
          type: "fullscreen",
        })}
        editorContainer={null}
        history={{
          location: {
            pathname: window.location.pathname,
          },
        }}
        match={{
          path: "",
          params: {
            campaignId: "cjyuopfrx00ga0792rxk0yha9",
            nodeId: "cjyuopfxq00gh07924rep6q96",
          },
        }}
        getPageQuery={{
          page: {
            type: false,
            name: "",
            id: "",
            content,
          },
          refetch: () => {
            return {
              data: { page: { content } },
            };
          },
        }}
        updatePageContent={({ variables }) => {
          console.log("update", variables);
          return {
            then: (response) => response,
          };
        }}
        show="builder"
        defaultMobileState={mobileStateData.fullscreen}
        log={(type, obj) => {
          console.log({ type, obj, time: new Date() });
        }}
        {...editorProps}
      />
    </div>
  );
};

export default Test;