import React, { useState } from "react";
import { Formik, Form, Field } from "formik";
import { Button, Container, InputLabel, Paper } from "@material-ui/core";
import { Grid } from "@material-ui/core";
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 * as Yup from "yup";
// import { makeStyles } from "@material-ui/styles";
import { Autocomplete } from "formik-material-ui-lab";

const outletData = [
  { outlet: "Outlet 1" },
  { outlet: "Outlet 2" },
  { outlet: "Outlet 3" },
];

interface OutletInput {
  outletName: string;
  address: string;
  city: string;
  state: string;
  country: string;
  postal_code: string;
  phone: string;
  email: string;
  tax_rate: string;
  link_type: string;
  linked_outlets: string;
  copy_outlet: string;
  taxrate_id: string;
  business_id: string;
}
const initialValues: OutletInput = {
  outletName: "",
  address: "",
  city: "",
  state: "",
  country: "",
  postal_code: "",
  phone: "",
  email: "",
  tax_rate: "",
  link_type: "",
  linked_outlets: "",
  copy_outlet: "",
  taxrate_id: "",
  business_id: "",
};
const validationSchema = Yup.object({
  outletName: Yup.string().required("Outlet Name Required"),
  address: Yup.string().required("Address Required"),
  city: Yup.string().required("City Required"),
  state: Yup.string().required("State Required"),
  country: Yup.string().required("Country Required"),
  postal_code: Yup.string().nullable(),
  phone: Yup.string().nullable(),
  email: Yup.string().nullable(),
  tax_rate: Yup.string().nullable(),
  link_type: Yup.string().nullable(),
  linked_outlets: Yup.string().nullable(),
  copy_outlet: Yup.string().nullable(),
  taxrate_id: Yup.string().nullable(),
  business_id: Yup.string().nullable(),
});

// const useStyles = makeStyles({
//   field:{
//    margin:2
//   }
// })

const Outlets = () => {
  const data = {
    outlets: [],
  };
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={async (values, { setSubmitting }) => {
        // try {
        //   setSubmitting(false);
        //   alert(JSON.stringify(values, null, 2));
        //   alert("Business Created");
        //   const { data } = await addOutlet({
        //     variables: {
        //       outletName: values.outletName,
        //       address: values.address,
        //       city: values.city,
        //       state: values.state,
        //       country: values.country,
        //       postal_code: values.postal_code,
        //       phone: values.phone,
        //       email: values.email,
        //       tax_rate: parseFloat(values.tax_rate),
        //       link_type: "link_type",
        //       linked_outlets: "link_type",
        //       copy_outlet: parseFloat("12"),
        //       taxrate_id: "taxrate_id",
        //       business_id: "business_id",
        //     },
        //   });
        //   console.log({ data });
        // } catch (e) {
        //   console.log({ e });
        // }
      }}
    >
      {({ submitForm, isSubmitting, touched, errors }) => (
        <Container>
          <Paper elevation={3}>
            <h2>Outlet Details</h2>
            <Form>
              <Grid container>
                <Grid item sm={4}>
                  <Box margin={4}>
                    <InputLabel htmlFor="my-input">
                      Name of your outlet
                    </InputLabel>
                  </Box>
                </Grid>

                <Grid item sm={8}>
                  <Box margin={1}>
                    <Field
                      variant="outlined"
                      size="small"
                      component={TextField}
                      name="outletName"
                      type="name"
                      label="Name"
                      helperText="Please Enter Outlet Name "
                      fullWidth
                    />
                  </Box>
                </Grid>
                <Grid item sm={4}>
                  <Box margin={4}>
                    <InputLabel htmlFor="my-input">Address</InputLabel>
                  </Box>
                </Grid>
                <Grid item sm={8}>
                  <Box margin={1} style={{ display: "flex" }}>
                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="address"
                      type="address"
                      label="Address Line 1"
                    />

                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="address"
                      type="address"
                      label="Address Line 2"
                      fullWidth
                    />
                  </Box>
                  <Box margin={1} style={{ display: "flex" }}>
                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="city"
                      type="city"
                      label="City"
                      fullWidth
                    />

                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="state"
                      type="state"
                      label="State"
                      fullWidth
                    />
                  </Box>
                  <Box margin={1} style={{ display: "flex" }}>
                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="postal_code"
                      type="postal_code"
                      label="Postal Code"
                      fullWidth
                    />

                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="country"
                      type="country"
                      label="country"
                      fullWidth
                    />
                  </Box>
                </Grid>
                <Grid item sm={4}>
                  <Box margin={4}>
                    <InputLabel htmlFor="my-input">
                      Outlet Phone Number{" "}
                      <strong>(Landline number is recommended)</strong>
                    </InputLabel>
                  </Box>
                </Grid>
                <Grid item sm={8}>
                  <Box margin={1}>
                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="phone"
                      type="phone"
                      label="Phone"
                      fullWidth
                    />
                  </Box>
                </Grid>
                <Grid item sm={4}>
                  <Box margin={4}>
                    <InputLabel htmlFor="my-input">Email address</InputLabel>
                  </Box>
                </Grid>
                <Grid item sm={8}>
                  <Box margin={1}>
                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="email"
                      type="email"
                      label="Email"
                      helperText="Please Enter Outlet Email"
                      fullWidth
                    />
                  </Box>
                </Grid>
                <Grid item sm={4}>
                  <Box margin={4}>
                    <InputLabel htmlFor="my-input">Tax Rate</InputLabel>
                  </Box>
                </Grid>
                <Grid item sm={8}>
                  <Box margin={1}>
                    <Field
                      variant="outlined"
                      component={TextField}
                      size="small"
                      name="tax_rate"
                      type="tax_rate"
                      label="Tax Rate"
                    />
                  </Box>
                </Grid>

                <Grid item sm={4}>
                  <Box margin={4}>
                    <InputLabel htmlFor="my-input">Linked Outlets</InputLabel>
                  </Box>
                </Grid>
                <Grid item sm={8}>
                  <Box margin={1}>
                    <Field
                      size="small"
                      name="autocomplete"
                      multiple
                      component={Autocomplete}
                      options={data.outlets}
                      getOptionLabel={(option: any) => option.name}
                      style={{ width: 300 }}
                      renderInput={(params: any) => (
                        <MuiTextField
                          {...params}
                          label="Outlets"
                          variant="outlined"
                        />
                      )}
                    />
                  </Box>
                </Grid>

                {isSubmitting && <CircularProgress />}

                <Grid sm={12} style={{ textAlign: "center" }}>
                  <Box margin={1}>
                    <Button
                      variant="contained"
                      color="primary"
                      disabled={isSubmitting}
                      onClick={submitForm}
                    >
                      Submit
                    </Button>
                  </Box>
                </Grid>
              </Grid>
            </Form>
          </Paper>
        </Container>
      )}
    </Formik>
  );
};

export default Outlets;