import * as React from "react";
import { AddOutlined } from "@material-ui/icons";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  workSpace: {
    display: "flex",
    alignItems: "center",
    minHeight: "24px",
    fontSize: "14px",
    padding: "0 14px 0 15px",
  },
  spaceWrapper: {
    flex: "1 1 auto",
    whiteSpace: "nowrap",
    minWidth: 0,
    overflow: "visible",
  },
  spaceContent: {
    userSelect: "none",
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
    borderRadius: "3px",
    padding: "2px 4px",
    marginLeft: "-4px",
    transition: "background 120ms ease-in 0s",
    background: "inherit",
    "&:hover": {
      background: "rgba(55, 53, 47, 0.08) none repeat scroll 0% 0%",
    },
  },
  spaceText: {
    letterSpacing: "0.03em",
    textTransform: "uppercase",
    fontSize: "11.5px",
    lineHeight: "1",
    marginBottom: "1px",
    color: "rgba(55, 53, 47, 0.4)",
    fontWeight: 600,
    transition: "color 100ms ease-out 0s",
    "&:hover": {
      color: "rgba(55, 53, 47, 0.6)",
    },
  },
  addItemContent: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    flexGrow: 0,
    height: "100%",
    cursor: "pointer",
  },
  addIcon: {
    border: "1px solid #8e9092",
    borderRadius: "50%",
    fontSize: "13px",
    verticalAlign: "middle",
    color: "#8e9092",
    "&:hover": {
      background: "rgba(55, 53, 47, 0.08)",
    },
  },
});

export interface TreeHeaderProps {
  title: string;
  treeToggle: (event: React.MouseEvent) => void;
  addItem: (event: React.MouseEvent) => void;
}

const TreeHeader: React.SFC<TreeHeaderProps> = (props) => {
  const classes = useStyles();
  const { title, treeToggle, addItem } = props;
  const defaultTitle = "Workspace";
  const [show, setShow] = React.useState(false);

  const handleMouseEnter = () => {
    setShow(true);
  };

  const handleMouseLeave = () => {
    setShow(false);
  };

  const AddContent = () => {
    return (
      <div className={classes.addItemContent} onClick={addItem}>
        <AddOutlined className={classes.addIcon} />
      </div>
    );
  };

  return (
    <div
      className={classes.workSpace}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className={classes.spaceWrapper}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <div className={classes.spaceContent} onClick={treeToggle}>
            <span className={classes.spaceText}>
              {title ? title : defaultTitle}
            </span>
          </div>
        </div>
      </div>
      {show ? <AddContent /> : null}
    </div>
  );
};

export { TreeHeader };