import React, { Component } from "react";
import _ from "lodash";
import { DropTarget } from "react-dnd";

import { Button } from "@sc/components/ui";
import { AppConfig } from "@sc/modules/app";

import AddNewDrawer from "./AddNewDrawer";
import AncestorLegend from "./AncestorLegend";
import MobileToggle from "./MobileToggle";
import SectionsLegend from "./SectionsLegend";

import Canvas from "./Canvas";

/**
 * This is the entire viewing area for the editor.  All page building/editing
 * happens here...
 * @param {object} props The props
 * @returns {function} The component
 */
class Builder extends Component {
  constructor(props) {
    super(props);

    this.state = {
      addNewDrawerVisible: false,
      isDragInProgress: false,
      activeAddNewTab: "OBJECTS",
    };

    this.toggleAddNewDrawer = this.toggleAddNewDrawer.bind(this);
  }

  static contextType = AppConfig;

  toggleAddNewDrawer() {
    this.setState((prevState) => ({
      addNewDrawerVisible: !prevState.addNewDrawerVisible,
    }));
    return null;
  }

  componentDidMount() {
    const {
      pageContent,
      history,
      match: {
        params: { campaignId, nodeId },
      },
      getPageQuery: {
        page: { type },
      },
    } = this.props;

    if (pageContent.length <= 2)
      history.push(`/campaign/${campaignId}/${nodeId}/templates/${type}`);
  }

  render() {
    const settings = this.context;
    const { getPageQuery, connectDropTarget, getMobileState } = this.props;

    if (getPageQuery.loading)
      return <img alt="" src={settings.app.loadingImage} />;
    if (getPageQuery.error) return <img alt="" src={settings.app.errorImage} />;

    const mobileState = getMobileState();
    const { type } = mobileState;
    const overflow =
      type === "tablet" || type === "smartphone" ? "auto" : "inherit";

    return (
      <div style={{ height: "100%" }}>
        <AddNewDrawer
          {...this.props}
          activeTab={this.state.activeAddNewTab}
          onClose={this.toggleAddNewDrawer}
          hidden={!this.state.addNewDrawerVisible}
          switchTab={(activeAddNewTab) => this.setState({ activeAddNewTab })}
        />

        <Button
          style={{
            position: "fixed",
            zIndex: 300,
            top: 70,
            left: 100,
            boxShadow:
              "0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4)",
          }}
          icon
          secondary
          onClick={this.toggleAddNewDrawer}
        >
          add
        </Button>

        <SectionsLegend
          {...this.props}
          openAddNewTab={() =>
            this.setState({ activeAddNewTab: "SECTIONS" }, () =>
              this.toggleAddNewDrawer()
            )
          }
        />

        {connectDropTarget(
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              flex: 1,
              backgroundColor: "white",
              height: "100%",
              overflow,
            }}
            ref={(node) => {
              this.editorContainer = node;
            }}
          >
            <Canvas {...this.props} editorContainer={this.editorContainer} />
          </div>
        )}

        <AncestorLegend {...this.props} />

        <MobileToggle {...this.props} />
      </div>
    );
  }
}

export default DropTarget(
  "CANVAS",
  {
    hover: (props, monitor) => {
      const { onResize } = monitor.getItem();
      onResize(props, monitor);
    },
  },
  (connect) => ({
    connectDropTarget: connect.dropTarget(),
  })
)(React.memo(Builder));