import React from "react";
import styled from "styled-components";
import Fab from "@material-ui/core/Fab";
import Tooltip from "@material-ui/core/Tooltip";
import { PinIcon } from "./Pin";
import Debug from "debug";
const debug = Debug("userbugreport:AddPinButton");
import { BugButtonSubmissionContainer } from "../BugButtonApp";

/**
 * Simple centering layout.
 */
const Root = styled.div`
  display: grid;
  place-items: center;
`;

/**
 * Size up the pin icon to nearly fill.
 */
const ScaledPin = styled(PinIcon)`
  width: 60%;
  height: 60%;
`;

/**
 * Pass in styles to position in grids.
 */
export interface AddPinButtonProps {
  /**
   * Style pass through to the form.
   */
  style?: React.CSSProperties;
}

export const AddPinButton: React.FC<AddPinButtonProps> = (
  props: AddPinButtonProps
) => {
  debug("render", props);
  const { addNewPin } = BugButtonSubmissionContainer.useContainer();

  return (
    <Root>
      <Tooltip title={"Add a new pin to mark a bug."}>
        <Fab onClick={addNewPin} size="small">
          <ScaledPin />
        </Fab>
      </Tooltip>
    </Root>
  );
};
