import React, { useState } from "react";

//Apollo useMutation Hook for API call
import { useMutation, useApolloClient } from "@apollo/react-hooks";
import {
  addDraftMutation as ADD_DRAFT_MUTATION,
  getDraftsQuery,
} from "../../queries/draft";

import GeneralInfoFormTemplate from "./formsTemplate/generalInfoFormTemplate";
import TipsLayout from "./formUtils/tipsLayout";

import {
  Button,
  CssBaseline,
  Paper,
  Grid,
  makeStyles,
} from "@material-ui/core";

import MobileStepper from "@material-ui/core/MobileStepper";

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(1),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
  tipTextLarge: {
    fontSize: "1.1rem",
  },
  tipTextSmall: {
    fontSize: "0.8rem",
  },
  bold: {
    fontWeight: "900",
  },
  progress: {
    width: "100%",
    flexGrow: 1,
    display: "flex",
    justifyContent: "center",
  },
}));

export default function GeneralInfo(props) {
  const client = useApolloClient();
  const [info, setInfo] = useState({
    email: "",
    firstName: "",
    lastName: "",
  });

  //Instantiate useMutation Hook / Creates tuple with 1st var being actual
  //call function, and 2nd destructured variable being return data and tracking
  const [addDraft, { loading, error }] = useMutation(ADD_DRAFT_MUTATION, {
    // refetchQueries: ["getDrafts"],
    onCompleted(data) {
      // console.log("cache\n", cache);
      // need to refetch and update our getDrafts query
      localStorage.setItem("draftID", data.addDraft);
    },
  });

  const classes = useStyles();

  const nextPage = (event) => {
    event.preventDefault();
    const name = info.firstName + " " + info.lastName;

    //Calls addDraft Mutation only if component state
    //is NOT empty
    if (
      info.firstName.length > 0 &&
      info.lastName.length > 0 &&
      info.email.length > 0
    ) {
      //Apollo useMutation API call to send data to backend
      addDraft({
        variables: {
          input: {
            name: name,
            email: info.email,
          },
        },
      });
    }

    props.setActiveStep((prevActiveStep) => prevActiveStep + 1);

    props.history.push("/form/education");
  };

  const onChange = (event) => {
    setInfo({ ...info, [event.target.name]: event.target.value });
  };

  if (loading) return <div>loading : {loading}</div>;
  if (error) return <div>{error}</div>;

  return (
    <div id="generalInfoForm">
      <Grid container componet="main" className={classes.root}>
        <CssBaseline />
        <TipsLayout tips={Tip()} />
        <Grid item xs={12} sm={8} md={9} component={Paper} elevation={6} square>
          <MobileStepper
            variant="progress"
            steps={8}
            position="static"
            activeStep={props.activeStep}
            className={classes.progress}
          />
          <div className={classes.paper}>
            <form className={classes.form}>
              <GeneralInfoFormTemplate onChange={onChange} info={info} />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                onClick={nextPage}
                className={classes.submit}
              >
                Next
              </Button>
            </form>
          </div>
        </Grid>
      </Grid>
    </div>
  );
}

//tips="Hey, welcome to Resumeker forms! These forms will help you create a beautiful
//resume to impress your potential employers!"

function Tip() {
  const classes = useStyles();

  return (
    <div>
      <p className={classes.tipTextLarge}>Hey, Welcome to Resumeker Forms!</p>
      <p className={classes.tipTextLarge}>
        This Form Flow process will help you create a beautiful and effective
        resume for potential employers.
      </p>
      <p className={classes.tipTextSmall}>
        Keep an eye out for these <span className={classes.bold}>tips</span> as
        they will help you along the way!
      </p>
    </div>
  );
}