import * as React from "react";
import _ from "lodash";

import html2canvas from "html2canvas";

import { Section } from "./live";

import theme from "@sc/components/ui/theme";

import EditorObject from "@sc/modules/page/Builder/EditorObject";

import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";
import { updateSection } from "@sc/modules/v2/Properties/components/generator";

import sectionSettings from "./settings";
import { PluginProps } from "./types";
import { SectionTypes } from "@sc/modules/v2/Properties/types";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import { IconButton } from "@material-ui/core";
import Icon, { IconTypes } from "../Icon";
import { listChildren } from "@sc/modules/v2/Editor/actions";

const Properties = (props) => {
  const { updateComponentStyle, settings } = props;
  const { properties } = sectionSettings;
  const { sections } = properties.main;

  const withHeight = updateSection(sections, SectionTypes.WIDTHHEIGHT, {
    onChange: (resp) => {
      switch (resp) {
        case "GROW": {
          const height = _.get(settings, "properties.height", 0) + 10;
          updateComponentStyle(settings.id, { height }, true, false);
          break;
        }
        case "SHRINK": {
          const height = _.get(settings, "properties.height", 6) - 10;
          updateComponentStyle(settings.id, { height }, true, false);
          break;
        }
        default: {
          const height = resp;
          updateComponentStyle(settings.id, { height }, true, false);
        }
      }
    },
  });

  return (
    <PropertiesBuilder
      {...props}
      data={{
        ...properties,
        main: { ...properties.main, sections: withHeight },
      }}
      title="Page Section"
    />
  );
};

enum movePositions {
  MOVE_UP,
  MOVE_DOWN,
  DIVIDER = "divider",
}

export const EditorSection: React.FC<PluginProps> = (props) => {
  const {
    settings,
    mode,
    id,
    children,
    pageContent,
    moveThisByThat,
    addThisAfterThat,
  } = props;
  const properties = convertProperties(settings.properties);
  const sections = pageContent.filter((itm) => itm.type === "Section");
  const key = sections.findIndex((itm) => itm.id === settings.id);

  const handleSectionMove = (id) => {
    if (id === movePositions.MOVE_UP) {
      moveThisByThat(sections[key].id, sections[key - 1].id);
    }
    if (id === movePositions.MOVE_DOWN) {
      moveThisByThat(sections[key].id, sections[key + 1].id);
    }
    if (id === "SNAPSHOT") {
      const headerSection = document.getElementById("section");
      html2canvas(headerSection).then((canvas) => {
        const base64image = canvas.toDataURL("image/png");
        console.log({ base64image });
        window.open(base64image, "_blank");
      });
    }
    if (id === "COPY") {
      // generate JSON
      const df = _.head(pageContent.filter((itm) => itm.id === settings.id));
      const cnt = listChildren(pageContent, settings.id);
      // console.log(cnt);
      const clipboard = JSON.stringify(cnt);

      // add to local storage
      if (typeof window === "object") {
        window.sessionStorage.setItem("clipboard", clipboard);
        alert("The Section Has Been Copied");
      }

      console.log(clipboard);
    }
    if (id === "PASTE") {
      // grab from local storage
      const clipboard = JSON.parse(sessionStorage.getItem("clipboard"));
      // add to canvas below this section
      addThisAfterThat(clipboard, settings.id);
    }
  };

  // const MoveUpDown: React.FC = () => (
  //   <div style={{ position: "absolute", right: 0 }}>
  //     {_.has(sections, key - 1) && (
  //       <span
  //         style={{ color: "white", cursor: "pointer" }}
  //         onClick={() => handleSectionMove(movePositions.MOVE_UP)}
  //       >
  //         <Icon type={IconTypes.ArrowUpward} />
  //       </span>
  //     )}
  //     {_.has(sections, key + 1) && (
  //       <span
  //         style={{ color: "white", cursor: "pointer" }}
  //         onClick={() => handleSectionMove(movePositions.MOVE_DOWN)}
  //       >
  //         <Icon type={IconTypes.ArrowDownward} />
  //       </span>
  //     )}
  //   </div>
  // );

  return (
    <V1ObjectWrapper
      settings={{
        ...settings,
        properties: { ...settings.properties, maxWidth: "100%", width: "100%" },
      }}
    >
      <EditorObject
        // label="Page Section"
        id={id}
        {...props}
        PropertiesView={Properties}
        borderSize={5}
        color={theme.primaryColor}
        objectHandleStyle={{
          hover: { backgroundColor: theme.primaryColor, color: "white" },
        }}
        dropDownItems={[
          ...(_.has(sections, key - 1)
            ? [{ id: movePositions.MOVE_UP, text: "Move Up" }]
            : []),
          ...(_.has(sections, key + 1)
            ? [{ id: movePositions.MOVE_DOWN, text: "Move Down" }]
            : []),
          // { id: movePositions.DIVIDER },
          // // { id: "SNAPSHOT", text: "Download Picture" },
          // { id: "COPY", text: "Copy to Clipboard" },
          // ...(window.sessionStorage.hasOwnProperty("clipboard")
          //   ? [{ id: "PASTE", text: "Paste Below" }]
          //   : []),
          // { id: movePositions.DIVIDER },
        ]}
        onDropDownChange={handleSectionMove}
        style={{ width: "100%", maxWidth: "100%" }}
        // customComponent={<MoveUpDown />}
      >
        <div id="section">
          <Section
            {...settings}
            properties={properties}
            mode={mode}
            testId="WC-SECTION-EDIT"
          >
            {children}
          </Section>
        </div>
      </EditorObject>
    </V1ObjectWrapper>
  );
};
export default EditorSection;