import React, { useState } from "react";
import { Formik, Form, Field, useFormik } from "formik";
import {
  Button,
  Container,
  InputLabel,
  LinearProgress,
  Paper,
} from "@material-ui/core";
import { Grid } from "@material-ui/core";
import { useDispatch } from "react-redux";
// import { TextField } from "formik-material-ui";
import Box from "@material-ui/core/Box";
import CircularProgress from "../../../utils/ui/CircularProgress";
import MuiTextField from "@material-ui/core/TextField";
// import { makeStyles } from "@material-ui/styles";
import { Autocomplete } from "formik-material-ui-lab";
import TextField from "@material-ui/core/TextField";
import * as yup from "yup";

import { createBusinesses } from "../../../store/business-action";

const validationSchema = yup.object({
  businessName: yup.string().required("business name is required"),
  businessType: yup.string().required("business type is required"),
});
function CreateNewBusiness() {
  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      businessName: "",
      businessType: "",
    },
    validationSchema: validationSchema,
    onSubmit: (values: any) => {
      console.log("val ", { values });
      dispatch(
        createBusinesses({
          businessName: values.businessName,
          type: values.businessType,
        })
      );
    },
  });
  return (
    <Container>
      <Paper elevation={3}>
        <Box margin={3} padding={2}>
          <Grid container>
            <form onSubmit={formik.handleSubmit}>
              <Box padding={4}>
                <TextField
                  required
                  id="standard-required-business-name"
                  label="Business Name"
                  name="businessName"
                  type="text"
                  value={formik.values.businessName}
                  onChange={formik.handleChange}
                  error={
                    formik.touched.businessName &&
                    Boolean(formik.errors.businessName)
                  }
                  helperText={
                    formik.touched.businessName && formik.errors.businessName
                  }
                />
                <TextField
                  id="standard-required-business-type"
                  name="businessType"
                  label="Business Type"
                  type="text"
                  value={formik.values.businessType}
                  onChange={formik.handleChange}
                  error={
                    formik.touched.businessType &&
                    Boolean(formik.errors.businessType)
                  }
                  helperText={
                    formik.touched.businessType && formik.errors.businessType
                  }
                />
              </Box>
              <Button
                color="primary"
                variant="contained"
                fullWidth
                type="submit"
              >
                Submit
              </Button>
            </form>
          </Grid>
        </Box>
      </Paper>
    </Container>
  );
}

export default CreateNewBusiness;