// import { app } from "../../config";
import { decode } from "@sc/api/utils";
import { FontIcon /*Menu, MenuItem  */ } from "@sc/components/ui";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

import theme from "@sc/components/ui/theme";
import { AppConfig } from "@sc/modules/app";
import _ from "lodash";
import React, { Component } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
// import { MenuItem } from "@material-ui/core";

const TabItem = styled.div`
  padding: 15px 0;
  text-align: center;
  cursor: pointer;
  color: #ccc;
  font-size: 10pt;
  ${({ active }) => (active ? "background-color: #111" : "")} &:hover {
    ${({ active }) =>
      active ? "background-color: #111" : "background-color: #19334d"};
  }
`;
const icon = { color: "#CCC", marginBottom: 8 };

const MoreTab = ({ campaignId, nodeId }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleMoreClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <div
        style={{ position: "absolute", bottom: 0, width: 85 }}
        aria-controls="more_menu"
        aria-haspopup="true"
        onClick={handleMoreClick}
      >
        <TabItem>
          <FontIcon style={icon}>more_horiz</FontIcon>
          <div>More</div>
        </TabItem>
      </div>
      <Menu
        id="more_menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <Link
          style={{ color: "#333" }}
          to={`/campaign/${campaignId}/${nodeId}/exit`}
        >
          <MenuItem>
            <FontIcon style={{ ...icon, color: "#333" }}>exit_to_app</FontIcon>
            <div style={{ padding: 10, marginTop: -2 }}>
              Exit Intent Settings
            </div>
          </MenuItem>
        </Link>
        <Link
          style={{ color: "#333" }}
          to={`/campaign/${campaignId}/${nodeId}/css`}
        >
          <MenuItem>
            <FontIcon style={{ ...icon, color: "#333" }}>format_paint</FontIcon>
            <div style={{ padding: 10, marginTop: -2 }}>CSS for this Page</div>
          </MenuItem>
        </Link>
        {/* <Link
          style={{ color: "#333" }}
          to={`/campaign/${campaignId}/${nodeId}/history`}
        >
          <MenuItem>
            <FontIcon style={{ ...icon, color: "#333" }}>timeline</FontIcon>
            <div style={{ padding: 10, marginTop: -2 }}>The Time Machine</div>
          </MenuItem>
        </Link> */}
      </Menu>
    </div>
  );
};

class TabSidebar extends Component {
  static contextType = AppConfig;

  render() {
    const { app } = this.context;
    const { show, getPageQuery, match, history, content } = this.props;
    const { campaignId, nodeId } = match.params;

    const iconActive = { color: theme.altColor[4] };

    const showMerchantSettings =
      content.findIndex((itm) => itm.name === "cardNumber") > -1 ||
      content
        .filter((itm) => itm.hasOwnProperty("actions"))
        .findIndex(
          (i) =>
            i.actions.findIndex(
              (o) => o.type === "TRIGGER_UPSELL" || o.type === "TRIGGER_BOLTPAY"
            ) > -1
        ) > -1;

    const pageSettings = getPageQuery.page.pageSettings;

    const storedEmailPayload = _.get(pageSettings, "email.payload", false);
    const emailPayload = storedEmailPayload
      ? JSON.parse(decode(storedEmailPayload))
      : false;

    return (
      <div>
        <TabItem
          style={{ paddingTop: 18 }}
          onClick={() => {
            localStorage.builderType === "editor"
              ? history.push(`/campaign/${campaignId}/builder`)
              : (window.location.href = `/campaign/${campaignId}/edit`);
          }}
        >
          <FontIcon style={icon}>keyboard_arrow_left</FontIcon>
          <div>My Funnel</div>
        </TabItem>
        <Link
          to={`/campaign/${campaignId}/${nodeId}/templates/${getPageQuery.page.type}`}
        >
          <TabItem active={show === "templates"}>
            <FontIcon
              style={show === "templates" ? { ...icon, ...iconActive } : icon}
            >
              apps
            </FontIcon>
            <div style={show === "templates" ? iconActive : {}}>Templates</div>
          </TabItem>
        </Link>
        <Link to={`/campaign/${campaignId}/${nodeId}/builder`}>
          <TabItem active={show === "builder"}>
            <FontIcon
              style={show === "builder" ? { ...icon, ...iconActive } : icon}
            >
              create
            </FontIcon>
            <div style={show === "builder" ? iconActive : {}}>Editor</div>
          </TabItem>
        </Link>
        <Link to={`/campaign/${campaignId}/${nodeId}/seo`}>
          <TabItem active={show === "seo"}>
            <FontIcon
              style={show === "seo" ? { ...icon, ...iconActive } : icon}
            >
              thumb_up
            </FontIcon>
            <div style={show === "seo" ? iconActive : {}}>SEO</div>
          </TabItem>
        </Link>
        {!showMerchantSettings ? (
          <Link
            to={`/campaign/${campaignId}/${nodeId}/email/${
              app.showProviderStep && !_.has(emailPayload, "campaignId")
                ? "provider"
                : "campaign"
            }`}
          >
            <TabItem active={show === "email"}>
              <FontIcon
                style={show === "email" ? { ...icon, ...iconActive } : icon}
              >
                email
              </FontIcon>
              <div style={show === "email" ? iconActive : {}}>
                Campaign Settings
              </div>
            </TabItem>
          </Link>
        ) : null}
        {showMerchantSettings ? (
          <Link to={`/campaign/${campaignId}/${nodeId}/merchant/index`}>
            <TabItem active={show === "merchant"}>
              <FontIcon
                style={show === "merchant" ? { ...icon, ...iconActive } : icon}
              >
                attach_money
              </FontIcon>
              <div style={show === "merchant" ? iconActive : {}}>
                Payment Settings
              </div>
            </TabItem>
          </Link>
        ) : null}
        <Link to={`/campaign/${campaignId}/${nodeId}/tracking`}>
          <TabItem active={show === "tracking"}>
            <FontIcon
              style={show === "tracking" ? { ...icon, ...iconActive } : icon}
            >
              settings_ethernet
            </FontIcon>
            <div style={show === "tracking" ? iconActive : {}}>Tracking</div>
          </TabItem>
        </Link>
        <MoreTab campaignId={campaignId} nodeId={nodeId} />
      </div>
    );
  }
}

export default TabSidebar;