import React from "react";
import * as Yup from "yup";
import {
  Container,
  Grid,
  Typography,
  Box,
  Divider,
  FormControl,
  InputLabel,
  MenuItem,
  Button,
  Paper,
} from "@material-ui/core";
import { TextField, Select, Switch, Checkbox } from "formik-material-ui";
import { Form, Formik, Field } from "formik";
import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";
import { addRecipts } from "../../../store/receipt-action";
import { useDispatch } from "react-redux";
// import { PDFViewer } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

interface ReceiptInput {
  templateName: string;
  tradingName: string;
  receiptType: string;
  showLogo: boolean;
  showOutletDetails: boolean;
  showCustomerDetails: boolean;
  headerText: string;
  footerText: string;
  numberPrefix: string;
  titleSubtotal: string;
  titleDiscount: string;
  showBarcode: boolean;
}
const INITIAL_FORM_STATE: ReceiptInput = {
  templateName: "",
  tradingName: "",
  receiptType: "",
  showLogo: true,
  showOutletDetails: true,
  showCustomerDetails: true,
  headerText: "",
  footerText: "",
  numberPrefix: "",
  titleSubtotal: "",
  titleDiscount: "",
  showBarcode: true,
};

const FORM_VALIDATION = Yup.object({
  templateName: Yup.string().required("Template Name Required"),
  tradingName: Yup.string().required("Trading Name Required"),
  receiptType: Yup.string().required("Receipt Type Required"),
});

function Receipt() {

  const dispatch = useDispatch();

    const MyDocument = (values:any) =>{

      return(
        <Document>
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Text>{values.values.templateName}</Text>
          </View>
          <View style={styles.section}>
            <Text>{values.values.tradingName}</Text>
          </View>
          <View style={styles.section}>
            <Text>{values.values.receiptType}</Text>
          </View>
        </Page>
      </Document>
      );
    }



  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 }) => {

            MyDocument(values);

            try {
              setSubmitting(false);

              alert(JSON.stringify(values, null, 2));
              alert("Receipt Created");
              dispatch( addRecipts({
                templateName: values.templateName,
                tradingName: values.tradingName,
                receiptType: values.receiptType,
                showLogo: true,
                showOutletDetails: true,
                showCustomerDetails: true,
                headerText: values.headerText,
                footerText: values.footerText,
                numberPrefix: values.numberPrefix,
                titleSubtotal: values.titleSubtotal,
                titleDiscount: values.titleDiscount,
                showBarcode: true
              }))
  
            }catch(e){
              console.log("Error when creating a new receipt")
            }

            
              
            
          }}
        >
          {({ submitForm, isSubmitting, touched, errors }) => (
            <Form>
              {/* Genaral Setting part Label Header Section */}
              <Grid container>
                <Grid item xs={12}>
                  <Typography>
                    <h3>Receipt Settings</h3>
                  </Typography>

                  <Divider />
                </Grid>
              </Grid>
              {/* Register Setting form part */}
              <Grid container spacing={2} style={{ marginBottom: "20px" }}>
                <Grid item xs={8}>
                  <Grid>
                    <Box margin={1}>
                      <Field
                        variant="outlined"
                        size="small"
                        component={TextField}
                        name="templateName"
                        type="name"
                        label="Template Name"
                        helperText="Template Name"
                        fullWidth
                      />
                    </Box>
                  </Grid>

                  <Grid>
                    <Box margin={1}>
                      <Field
                        variant="outlined"
                        size="small"
                        component={TextField}
                        name="tradingName"
                        type="name"
                        label="Trading Name"
                        helperText="Type trading name "
                        fullWidth
                      />
                    </Box>
                  </Grid>

                  <Grid item xs={12}>
                    <Box margin={1}>
                      <Field
                        variant="outlined"
                        size="small"
                        component={TextField}
                        name="receiptType"
                        type="name"
                        label="Receipt Type"
                        helperText="Type your receipt type "
                        fullWidth
                      />
                    </Box>
                  </Grid>

                  <Grid container>
                    <Grid item sm={3}>
                      <Box margin={2}>
                        <Typography variant="subtitle2">
                          <Box fontWeight="fontWeightBold">Show Logo</Box>
                        </Typography>

                        <Field
                          component={Switch}
                          type="checkbox"
                          name="showLogo"
                          color="primary"
                        />
                        <Typography variant="body2">
                          <Box fontWeight="fontWeightRegular" m={0}>
                            Default is active.
                          </Box>
                        </Typography>
                      </Box>
                    </Grid>
                    <Grid item sm={3}>
                      <Box margin={2}>
                        <Typography variant="subtitle2">
                          <Box fontWeight="fontWeightBold">
                            Show Outlet Details
                          </Box>
                        </Typography>

                        <Field
                          component={Switch}
                          type="checkbox"
                          name="showOutletDetails"
                          color="primary"
                        />
                        <Typography variant="body2">
                          <Box fontWeight="fontWeightRegular" m={0}>
                            Default is active.
                          </Box>
                        </Typography>
                      </Box>
                    </Grid>
                    <Grid item sm={3}>
                      <Box margin={2}>
                        <Typography variant="subtitle2">
                          <Box fontWeight="fontWeightBold">
                            Show Customer Details
                          </Box>
                        </Typography>

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

                    <Grid item sm={3}>
                      <Box margin={2}>
                        <Typography variant="subtitle2">
                          <Box fontWeight="fontWeightBold">Show Barcode</Box>
                        </Typography>

                        <Field
                          component={Switch}
                          type="checkbox"
                          name="showBarcode"
                          color="primary"
                        />
                        <Typography variant="body2">
                          <Box fontWeight="fontWeightRegular" m={0}>
                            Defaul is active.
                          </Box>
                        </Typography>
                      </Box>
                    </Grid>
                  </Grid>

                  <Grid item container>
                    <Grid item xs={6}>
                      <Box margin={1}>
                        <Field
                          variant="outlined"
                          size="small"
                          component={TextField}
                          name="headerText"
                          type="name"
                          label="Header Text"
                          helperText="Type a header text"
                          fullWidth
                        />
                      </Box>
                    </Grid>

                    <Grid item xs={6}>
                      <Box margin={1}>
                        <Field
                          variant="outlined"
                          size="small"
                          component={TextField}
                          name="footerText"
                          type="name"
                          label="Footer Text"
                          helperText="Type a footer text"
                          fullWidth
                        />
                      </Box>
                    </Grid>

                    <Grid item xs={6}>
                      <Box margin={1}>
                        <Field
                          variant="outlined"
                          size="small"
                          component={TextField}
                          name="titleSubtotal"
                          type="name"
                          label="Title for Subtotal"
                          helperText="Type a title for subtotal"
                          fullWidth
                        />
                      </Box>
                    </Grid>
                    <Grid item xs={6}>
                      <Box margin={1}>
                        <Field
                          variant="outlined"
                          size="small"
                          component={TextField}
                          name="titleDiscount"
                          type="name"
                          label="Title for Discount"
                          helperText="Type a title for dicount"
                          fullWidth
                        />
                      </Box>
                    </Grid>

                    <Grid item xs={12}>
                      <Box margin={1}>
                        <Field
                          variant="outlined"
                          size="small"
                          component={TextField}
                          name="numberPrefix"
                          type="name"
                          label="Number Prefix"
                          helperText="Type number prefix"
                          fullWidth
                        />
                      </Box>
                    </Grid>
                  </Grid>
                </Grid>

                {/* Receipt Goes here */}
                <Grid item sm={4}>
                  {/* <PDFViewer>
                  {()=>{MyDocument()}}
                  Receipt Goes Here
                </PDFViewer>
                  Receipt Goes Here!!! */}

                  
                </Grid>
              </Grid>

              <Divider />

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

export default Receipt;