import React from "react";
import * as Yup from "yup";
import {
  Container,
  Grid,
  Typography,
  Box,
  Divider,
  FormControl,
  InputLabel,
  MenuItem,
  Button,
} from "@material-ui/core";
import { TextField, Select, Switch, Checkbox } from "formik-material-ui";
import { Form, Formik, Field } from "formik";

interface RegisterInput {
  registerName: string;
  firstNumber: number;
  prefix: string;
  suffix: string;
  outlet_name: string;
  outlet_id: string;
  receipt_id: string;
  business_id: string;
  open: boolean;
}
const INITIAL_FORM_STATE: RegisterInput = {
  registerName: "",
  firstNumber: 0,
  prefix: "",
  suffix: "",
  outlet_name: "",
  outlet_id: "",
  receipt_id: "",
  business_id: "",
  open: false,
};

const FORM_VALIDATION = Yup.object({
  registerName: Yup.string().required("Business Name Required"),
});

function Register() {
  const data = {
    outlets:[]
  }

  return (
    <div style={{ marginLeft: "20px", marginRight: "20px" }}>
      {/* Form Part */}
      <Container style={{ paddingLeft: "0px", paddingRight: "0px" }}>
        <Formik
          initialValues={INITIAL_FORM_STATE}
          validationSchema={FORM_VALIDATION}
          onSubmit={async (values, { setSubmitting }) => {
            // try {
            //   setSubmitting(false);

            //   alert(JSON.stringify(values, null, 2));
            //   alert("Register Created");

            //   const { data } = await addRegister({
            //     variables: {
            //       registerName: values.registerName,
            //       firstNumber: 2,
            //       prefix: values.prefix,
            //       suffix: values.suffix,
            //       outlet_name: values.outlet_name,
            //       open: values.open ? true : false,
            //       outlet_id: "outlet_id",
            //       receipt_id: "recipt_id",
            //       business_id: "business_id",
            //     },
            //   });
            //   console.log({ data });
            // } catch (e) {
            //   console.log({ e });
            // }
          }}
        >
          {({ submitForm, isSubmitting, touched, errors }) => (
            <Form>
              {/* Genaral Setting part Label Header Section */}
              <Grid container>
                <Grid item xs={12}>
                  <Typography>
                    <h3>Register Setting</h3>
                  </Typography>

                  <Divider />
                </Grid>
              </Grid>
              {/* Register Setting form part */}
              <Grid container spacing={2} style={{ marginBottom: "20px" }}>
                <Grid item xs={4}>
                  <Typography variant="subtitle2" color="primary">
                    <Box fontWeight="fontWeightBold" m={0}>
                      Register Setting
                    </Box>
                  </Typography>
                  <Typography variant="body2">
                    <Box fontWeight="fontWeightRegular" m={0}>
                      Setting about your rgister, you can add register and
                      maintain
                    </Box>
                  </Typography>
                </Grid>

                <Grid item xs={8}>
                  <Grid>
                    <Box margin={1}>
                      <Field
                        variant="outlined"
                        size="small"
                        component={TextField}
                        name="registerName"
                        type="name"
                        label="Register Name"
                        helperText="Type your register name "
                        fullWidth
                      />
                    </Box>
                  </Grid>

                  <Grid>
                    <Box margin={1}>
                      <Field
                        variant="outlined"
                        size="small"
                        component={TextField}
                        name="firstNumber"
                        type="name"
                        label="First Number"
                        helperText="Type your first number. "
                        fullWidth
                      />
                    </Box>
                  </Grid>

                  <Grid container>
                    <Grid item xs={6}>
                      <Box margin={1}>
                        <Field
                          variant="outlined"
                          size="small"
                          component={TextField}
                          name="prefix"
                          type="name"
                          label="Prefix"
                          helperText="Type your prefix. "
                          fullWidth
                        />
                      </Box>
                    </Grid>

                    <Grid item xs={6}>
                      <Box margin={1}>
                        <Field
                          variant="outlined"
                          size="small"
                          component={TextField}
                          name="suffix"
                          type="name"
                          label="Suffix"
                          helperText="Type your sufix. "
                          fullWidth
                        />
                      </Box>
                    </Grid>
                  </Grid>

                  <Grid>
                    <Box margin={1}>
                      <InputLabel shrink={true} htmlFor="outlet_name">
                        Outlet
                      </InputLabel>
                        <FormControl  size='small' fullWidth>

                      <Field
                       
                        variant="outlined"
                        component={Select}
                        type="text"
                        name="outlet_name"
                        multiple={false}
                        inputProps={{ name: "outlet_name", id: "outlets" }}
                        fullWidth
                      >
                        {data &&
                          data.outlets.map((row: any) => (
                            <MenuItem value={row.name}>{row.name}</MenuItem>
                          ))}
                      </Field>
                        </FormControl>
                    </Box>
                  </Grid>

                  <Grid>
                    <Box margin={1}>
                      <InputLabel shrink={true} htmlFor="receipt_id">
                        Print Recipt Template
                      </InputLabel>
                      <FormControl  size='small' fullWidth>

                      <Field
                        variant="outlined"
                        size="small"
                        component={Select}
                        type="text"
                        name="recipt_id"
                        multiple={false}
                        inputProps={{ name: "receipt_id", id: "1" }}
                        fullWidth
                      >
                        <MenuItem value="1">recipt1</MenuItem>
                        <MenuItem value="2">temp_recipt</MenuItem>
                        <MenuItem value="3">recipt2</MenuItem>
                        <MenuItem value="4">recipt3</MenuItem>
                      </Field>
                      </FormControl>
                    </Box>
                  </Grid>

                  <Grid>
                    <Box margin={2}>
                      <Typography variant="subtitle2">
                        <Box fontWeight="fontWeightBold">
                          Is Active This Register
                        </Box>
                      </Typography>

                      <Field
                        component={Switch}
                        type="checkbox"
                        name="open"
                        color="primary"
                      />
                      <Typography variant="body2">
                        <Box fontWeight="fontWeightRegular" m={0}>
                          Default Setting to register is active.
                        </Box>
                      </Typography>
                    </Box>
                  </Grid>
                </Grid>
              </Grid>

              <Divider />

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

export default Register;