import { Formik, Form, Field } from "formik";
import { Button } from "@material-ui/core";
import { TextField } from "formik-material-ui";
import CircularProgress from "../../src/components/loading/CircularProgress";


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

import * as Yup from "yup";

interface BusinessInput {
  firstName: string;
  lastName: string;
}
const initialValues: BusinessInput = {
  firstName: "",
  lastName: "",
};
const validationSchema = Yup.object({
  firstName: Yup.string().required("firs name is Required"),
  lastName: Yup.string().required("last name is Required"),
});

const App = () => {
  // const GET_USERS = gql`
  //   query {
  //     Users {
  //       id
  //       firstName
  //     }
  //   }
  // `;
  // const ADD_USER = gql`
  // mutation AddUser($firstName:String!,$lastName:String!){
  //   createUser(
  //     createUserInput:{
  //       firstName:$firstName
  //       lastName:$lastName
  //     }
  //   ){
      
  //       id
  //       firstName
      
  //   }
  // }
  // `;
  // const { loading, error, data } = useQuery(GET_USERS);
  // const [addTodo] = useMutation(ADD_USER);
  // return (
  //   <div>
  //     <Formik
  //       initialValues={initialValues}
  //       validationSchema={validationSchema}
  //       onSubmit={(values, { setSubmitting }) => {
  //         setTimeout(() => {
  //           setSubmitting(false);
  //           alert(JSON.stringify(values, null, 2));
  //           addTodo({
  //             variables: {
  //               firstName: values.firstName,
  //               lastName:values.lastName
  //             }
  //           })
  //         }, 1000);
  //       }}
  //     >
  //       {({ submitForm, isSubmitting, touched, errors }) => (
  //         <div>
  //           <Form>
  //             <Box margin={1}>
  //               <Field
  //                 variant="outlined"
  //                 component={TextField}
  //                 name="firstName"
  //                 type="text"
  //                 label="First Name"
  //                 helperText="Please Enter Email"
  //               />
  //             </Box>
  //             <Box margin={1}>
  //               <Field
  //                 variant="outlined"
  //                 component={TextField}
  //                 type="text"
  //                 label="Last Name"
  //                 name="lastName"
  //               />
  //             </Box>
  //             {isSubmitting && <CircularProgress />}

  //             <Box margin={1}>
  //               <Button
  //                 variant="contained"
  //                 color="primary"
  //                 disabled={isSubmitting}
  //                 onClick={submitForm}
  //               >
  //                 Submit
  //               </Button>
  //             </Box>
  //           </Form>
  //         </div>
  //       )}
  //     </Formik>
  //     {data ? (
  //       <div>
  //         <ul>
  //           {data.Users.map((u: any) => (
  //             <li>{u.firstName} </li>
  //           ))}
  //         </ul>
  //       </div>
  //     ) : (
  //       <CircularProgress />
  //     )}
  //   </div>
  // );
};
export default App;