import React, { useState, useEffect } from 'react';
import * as Yup from 'yup';
import { Formik } from 'formik';
import _ from 'lodash';
import { useDispatch, useSelector } from 'react-redux';
import { getMenus } from 'src/slices/menu';
import useAuth from 'src/hooks/useAuth';

import {
  Box,
  Button,
  Card,
  CardContent,
  CardHeader,
  Checkbox,
  CircularProgress,
  Divider,
  FormHelperText,
  Grid,
  Link,
  TextField,
  Typography
} from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import wait from 'src/utils/wait';
import axios from 'axios';

const CardForm = ({ item, index, menuItem, subMenu }) => {
  const [isAlertVisible, setAlertVisible] = useState(false);
  const [response, setResponse] = useState({});
  const dispatch = useDispatch();
  const { establishment } = useAuth();
  

  useEffect(() => {
    console.log('running....')
    dispatch(getMenus(establishment._id));
  }, []);

  const sendEdit = async values => {
    console.log(values, 'dette skal sendes inn');
    const menu = _.cloneDeep(menuItem);
    let update = menu.sections[subMenu.index].items.splice([index], 1, values);
    const accessToken = window.localStorage.getItem('accessToken');
    const config = {
      headers: { Auhorization: `Bearer ${accessToken}` }
    };
    const data = await axios
      .put(`http://localhost:5000/api/menus/${menu._id}`, menu, config)
      .then(result => {
        setResponse(result);
        // Update state
        dispatch(getMenus(establishment._id));
        
        

        return result;
      })
      .catch(err => {
        setResponse(err);
        return new Promise(err);
      });
    return data;
  };

  return (
    <Formik
      initialValues={{
        price: item.price,
        name: item.name,
        id: item.id,
        description: item.description,
        // policy: false,
        submit: null
      }}
      validationSchema={Yup.object().shape({
        price: Yup.string().required('Required'),
        name: Yup.string().required('Required'),
        id: Yup.string().required('Required'),
        description: Yup.string()
          .min(3, 'Må være minst 3 bokstaver')
          .max(255)
          .required('Required')
        // policy: Yup.boolean().oneOf([true], 'This field must be checked')
      })}
      onSubmit={async (
        values,
        { resetForm, setErrors, setStatus, setSubmitting }
      ) => {
        try {
          // NOTE: Make API request
          // await wait(1000);
          await sendEdit(values);
          resetForm();
          setStatus({ success: true });
          setSubmitting(false);
          setAlertVisible(true);
          resetForm();
        } catch (err) {
          console.error(err);
          setStatus({ success: false });
          setErrors({ submit: err.message });
          setSubmitting(false);
        }
      }}
    >
      {({
        errors,
        handleBlur,
        handleChange,
        handleSubmit,
        isSubmitting,
        touched,
        values
      }) => (
        <Card>
          <CardHeader title={`Rediger ${item.name}`} />
          <Divider />
          <CardContent>
            {isAlertVisible && (
              <Box mb={3}>
                <Alert
                  onClose={() => setAlertVisible(false)}
                  severity={response.status ? 'success' : 'error'}
                >
                  {response.status === 200
                    ? `Flott! Da er den oppdatert.`
                    : 'Beklager, det har skjedd en feil. Din beskjed er ikke registrert'}
                </Alert>
              </Box>
            )}
            {isSubmitting ? (
              <Box display="flex" justifyContent="center" my={5}>
                <CircularProgress />
              </Box>
            ) : (
              <form onSubmit={handleSubmit}>
                <Grid container spacing={2}>
                  <Grid item md={6} xs={12}>
                    <TextField
                      error={Boolean(touched.name && errors.name)}
                      fullWidth
                      helperText={touched.name && errors.name}
                      label="Navn"
                      name="name"
                      onBlur={handleBlur}
                      onChange={handleChange}
                      value={values.name}
                      variant="outlined"
                    />
                  </Grid>
                  <Grid item md={6} xs={12}>
                    <TextField
                      error={Boolean(touched.id && errors.id)}
                      fullWidth
                      helperText={touched.id && errors.id}
                      label="Meny nummer"
                      name="id"
                      onBlur={handleBlur}
                      onChange={handleChange}
                      value={values.id}
                      variant="outlined"
                    />
                  </Grid>
                </Grid>
                <Box mt={2}>
                  <TextField
                    error={Boolean(touched.price && errors.price)}
                    fullWidth
                    helperText={touched.price && errors.price}
                    label="Pris"
                    name="price"
                    onBlur={handleBlur}
                    onChange={handleChange}
                    type="price"
                    value={values.price}
                    variant="outlined"
                  />
                </Box>
                <Box mt={2}>
                  <TextField
                    error={Boolean(touched.description && errors.description)}
                    fullWidth
                    helperText={touched.description && errors.description}
                    label="Beskrivelse"
                    name="description"
                    onBlur={handleBlur}
                    onChange={handleChange}
                    type="description"
                    value={values.description}
                    variant="outlined"
                  />
                </Box>
                {/* <Box alignItems="center" display="flex" mt={2} ml={-1}>
                  <Checkbox
                    checked={values.policy}
                    name="policy"
                    onChange={handleChange}
                  />
                  <Typography variant="body2" color="textSecondary">
                    I have read the{' '}
                    <Link component="a" href="#" color="secondary">
                      Terms and Conditions
                    </Link>
                  </Typography>
                </Box>
                {Boolean(touched.policy && errors.policy) && (
                  <FormHelperText error>{errors.policy}</FormHelperText>
                )} */}
                <Box mt={2}>
                  <Button
                    color="secondary"
                    disabled={isSubmitting}
                    fullWidth
                    size="large"
                    type="submit"
                    variant="contained"
                  >
                    Lagre
                  </Button>
                </Box>
              </form>
            )}
          </CardContent>
        </Card>
      )}
    </Formik>
  );
};

export default CardForm;