import { Cell, Drawer, Grid, Tab, Tabs } from "@sc/components/ui";
import { AppConfig } from "@sc/modules/app";
import _ from "lodash";
import PropTypes from "prop-types";
import React, { Component } from "react";
// import { objects } from "./objects";
import ObjectThumbnail from "./ObjectThumbnail";
import { triggerHook } from "@sc/plugins";

import AddSectionsTab from "@sc/plugins/misc/v2/blocks/AddSectionsTab";
import { propsData } from "@sc/plugins/misc/v2/blocks/AddSectionsTab/AddSectionsTab.stories";

import { styles } from "./style";

import { BODY } from "@sc/modules/v2/Editor/types";
class AddNewDrawer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // activeTab: props.activeTab,
      filter: "",
    };

    // this.switchTab = this.switchTab.bind(this);
  }

  static contextType = AppConfig;

  // switchTab(activeTab) {
  //   this.setState({ activeTab });
  // }

  render() {
    // const { pageComponentIgnoreList } = this.context;

    const objectsFromPlugins = triggerHook("onListItem", {
      id: "webcomponent",
      type: "drawer",
    });

    const sectionsFromPlugins = triggerHook("onListItem", {
      id: "weblayout",
      type: "drawer",
    });

    // console.log({ sectionsFromPlugins });

    const { categories } = propsData;

    return (
      <Drawer
        {...this.props}
        overlay={false}
        style={{ ...this.props.style, width: 400, zIndex: 301 }}
        onClose={this.props.onClose}
      >
        <div
          style={{
            textAlign: "center",
            backgroundColor: "#F5F5F5",
            borderBottom: "1px solid #EEE",
          }}
        >
          <h2 style={{ padding: 30 }}>
            {this.props.activeTab === "OBJECTS"
              ? "Page Elements"
              : "Page Sections"}
          </h2>

          <Tabs transparent>
            <Tab
              active={this.props.activeTab === "OBJECTS"}
              onClick={() => this.props.switchTab("OBJECTS")}
            >
              Elements
            </Tab>
            <Tab
              active={this.props.activeTab === "SECTIONS"}
              onClick={() => this.props.switchTab("SECTIONS")}
            >
              Sections
            </Tab>
          </Tabs>
        </div>
        {this.props.activeTab === "OBJECTS" && (
          <div
            style={{
              padding: "20px 60px",
              textAlign: "center",
              maxHeight: "80vh",
              overflowY: "auto",
            }}
          >
            <Grid justify="center" style={{ margin: 10 }}>
              <Cell align="center" style={{ margin: 5 }}>
                <img
                  alt="drag widget hint"
                  src="https://s3.amazonaws.com/sandcastleassets/images/drag_widget_hint.png"
                />
              </Cell>
              <Cell align="center" style={{ margin: 5 }}>
                <p
                  style={{
                    textAlign: "center",
                    fontSize: 11,
                    marginTop: 5,
                    textTransform: "uppercase",
                  }}
                >
                  Drag an object
                  <br />
                  over to your web page
                </p>
              </Cell>
            </Grid>
            <input
              type="text"
              value={this.state.filter}
              onChange={(e) => this.setState({ filter: e.target.value })}
              style={styles.input}
              placeholder="Search for an element..."
            />

            <Grid wrap justify="start" style={{ width: 275, margin: "0 auto" }}>
              {/* {
                  _.filter(
                    objects,
                    o => _.indexOf(pageComponentIgnoreList, o.id) === -1
                  ).map(
                    (obj, key) =>
                      _.has(obj, "id") && (
                        <ObjectThumbnail
                          {...this.props}
                          item={obj}
                          key={key}
                          closeDrawer={this.props.onClose}
                          settings={{
                            type: [
                              obj.id[0].toUpperCase(),
                              ...obj.id.slice(1)
                            ].join(""),
                            ...obj.default
                          }}
                        />
                      )
                    )
                } */}
              {objectsFromPlugins
                .filter((itm) => {
                  // console.log(
                  //   itm.name,
                  //   this.state.filter,
                  //   itm.name.indexOf(this.state.filter)
                  // );
                  return (
                    itm.name
                      .toUpperCase()
                      .indexOf(this.state.filter.toUpperCase()) > -1 ||
                    itm.name === ""
                  );
                })
                .map((obj, key) => (
                  <ObjectThumbnail
                    {...this.props}
                    item={obj}
                    key={key}
                    closeDrawer={this.props.onClose}
                    settings={{
                      type: [obj.id[0].toUpperCase(), ...obj.id.slice(1)].join(
                        ""
                      ),
                      ...obj.default,
                    }}
                  />
                ))}
            </Grid>
          </div>
        )}

        {this.props.activeTab === "SECTIONS" && (
          <div style={{ width: "100%", textAlign: "center" }}>
            <AddSectionsTab
              {...this.props}
              sections={sectionsFromPlugins}
              categories={categories}
              onAddSection={(layout, addAfterId = false) => {
                const { pageContent, addThisAfterThat } = this.props;
                console.log({ layout });

                // 1. grab content to add from section var
                const item = _.head(
                  sectionsFromPlugins.filter((itm) => itm.layout === layout)
                );

                // 2. identify the section that's "closest" to the currently active content object
                const filteredSections = pageContent.filter(
                  (itm) => itm.type === "Section"
                );

                // (if none is found, make it the last child of the BODY container)
                const bodyChildren = pageContent.filter(
                  (itm) => itm.parent === BODY
                );

                let id = addAfterId;
                if (!id) {
                  id = filteredSections.length
                    ? filteredSections[filteredSections.length - 1]["id"]
                    : bodyChildren[bodyChildren.length - 1]["id"];
                }

                // 3. recursively add the section content below that section
                addThisAfterThat(item.default, id);
                this.props.onClose();

                // console.log(_.get(item, "default"), id);
              }}
            />
          </div>
        )}
      </Drawer>
    );
  }
}

AddNewDrawer.propTypes = {
  activeTab: PropTypes.string,
};

PropTypes.defaultProps = {
  activeTab: "OBJECTS",
};

// export { defaultSettings };
export default AddNewDrawer;