import { Button } from "@sc/components/ui";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import { makeStyles } from "@material-ui/core/styles";

import { AppConfig } from "@sc/modules/app";
import _ from "lodash";
import moment from "moment";
import React from "react";
import { Link } from "react-router-dom";
// import { app } from "../../config";
import AvatarButton from "../settings/AvatarButton";
import UndoRedo from "./Builder/UndoRedo";

const PageSelector = (props) => {
  return (
    <FormControl>
      <Select
        style={{ margin: "0 10px", border: "none", height: 50 }}
        variant="outlined"
        value={props.match.params.nodeId}
        onChange={(e) =>
          (window.location.href = `/campaign/${props.match.params.campaignId}/${e.target.value}/builder`)
        }
      >
        {_.orderBy(props.pages, "x")
          .filter((itm) => !itm.deleted)
          .map((itm, key) => (
            <MenuItem key={key} value={itm.page.id}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  // width: 250,
                }}
              >
                <span>Page: {itm.name}</span>
                <div
                  style={{
                    marginTop: -2,
                    marginLeft: 10,
                    fontSize: 10,
                    background: "#EEE",
                    color: "#666",
                    padding: 3,
                    borderRadius: 4,
                    float: "right",
                  }}
                >
                  /{itm.page.slug}
                </div>
              </div>
            </MenuItem>
          ))}
      </Select>
    </FormControl>
  );
};

const leftActionsGroup = [
  (props) => (
    <Button style={{ color: "inherit" }} icon onClick={props.toggleAppDrawer}>
      menu
    </Button>
  ),
  (props) => <>{props.pages.length ? <PageSelector {...props} /> : null}</>,
  (props) => (
    <UndoRedo
      doUndoRedo={props.doUndoRedo}
      undoPosition={props.undoPosition}
      undoStackSize={props.undoStackSize}
    />
  ),
];

// const title = "My Campaign Name";

const rightActionsGroup = [
  (props) =>
    _.has(props, "savingStatus.length") ? (
      <span
        style={{ color: "#AAA" }}
        title="Every change you make is automatically saved."
      >
        {props.savingStatus[0] === "SAVING" && "Saving..."}
        {props.savingStatus[0] === "SAVED" &&
          `All changes saved (${moment(props.savingStatus[1]).format("LT")})`}
      </span>
    ) : null,
  (props) =>
    !props.noPreview ? (
      <Link to="./builder/preview" target="_blank" style={{ color: "#333" }}>
        <Button style={{ color: "inherit" }} icon>
          visibility
        </Button>
      </Link>
    ) : null,
  (props) => (
    <Button iconLeft="publish" secondary onClick={props.onPublish}>
      Publish
    </Button>
  ),
  (props) => (
    <AppConfig.Consumer>
      {({ app }) => (app.showAvatar ? <AvatarButton {...props} /> : null)}
    </AppConfig.Consumer>
  ),
];

export { leftActionsGroup, rightActionsGroup };