import React from "react";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";
import { Formik, Form, Field } from "formik";
import { TextField } from "formik-material-ui";
import styled from "styled-components";
import { AddPinButton } from "./pinboard/AddPinButton";
import {
  BugButtonSubmissionContainer,
  BugButtonAppUIState,
} from "./BugButtonApp";
import Debug from "debug";
import { useTheme } from "@material-ui/core/styles";
import useDimensions from "react-cool-dimensions";
import { SmallScreenBreakpointWidth } from "./constants";
const debug = Debug("userbugreport:SubmissionForm");

/**
 * Form grid at root, lays out fields and buttons.
 *
 * It will expand to fill the area you give it -- but needs to be at least
 * 40em wide to be useful.
 */
const Root = styled(Box)`
  display: grid;
  align-items: center;
  justify-items: left;
  grid-template-columns: 4em 1fr 8em 8em;
  grid-template-rows: auto;
  grid-template-areas:
    "title title title title"
    "description description description description"
    "add . cancel submit";
  grid-gap: ${(props) => props.theme.spacing(1)}px;
`;

/**
 * SubmissionForm is configured with these props.
 */
export interface SubmissionFormProps {
  /**
   * Style pass through to the form, used to place in grids.
   */
  style?: React.CSSProperties;
}

/**
 * Submission form provides a spot for users to create the text
 * and title for describing an overall bug.
 *
 * This is included inside the pop-overlay launched by the BugButton.
 */
export const SubmissionForm: React.FC<SubmissionFormProps> = (
  props: SubmissionFormProps
) => {
  const theme = useTheme();
  debug("render", props, theme);
  const { ref, width } = useDimensions();
  const {
    submission,
    setUIState,
    updateForm,
    cancel,
  } = BugButtonSubmissionContainer.useContainer();

  /**
   * User is done -- time to submit!
   */
  const onSubmit = (values, { setSubmitting }) => {
    debug("submit", values);
    updateForm(values);
    setUIState(BugButtonAppUIState.Submitting);
    setSubmitting(false);
  };
  return (
    <Formik initialValues={submission.form} onSubmit={onSubmit}>
      {({ submitForm }) => (
        <Form style={props.style}>
          <Root ref={ref}>
            <Field
              component={TextField}
              name="title"
              label={"Provide a one line summary of the problem"}
              fullWidth
              variant="outlined"
              style={{ gridArea: "title" }}
            />
            <Field
              component={TextField}
              name="description"
              label={"Tells us more about it"}
              fullWidth
              variant="outlined"
              InputProps={{
                multiline: true,
                rows: 4,
              }}
              style={{ gridArea: "description" }}
            />
            {/* annotations on the screenshot are disabled on small screens */}
            {width > SmallScreenBreakpointWidth && (
              <AddPinButton style={{ gridArea: "add" }} />
            )}
            <Button
              variant="contained"
              color="secondary"
              fullWidth
              style={{ gridArea: "cancel" }}
              onClick={cancel}
            >
              Cancel
            </Button>
            <Button
              variant="contained"
              color="primary"
              fullWidth
              style={{ gridArea: "submit" }}
              onClick={submitForm}
            >
              Submit It!
            </Button>
          </Root>
        </Form>
      )}
    </Formik>
  );
};
