// ** MUI Imports
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import InputAdornment from '@mui/material/InputAdornment';

// ** Icons Imports
import ShortTextIcon from '@mui/icons-material/ShortText';
import NotesIcon from '@mui/icons-material/Notes';
import { Link, Stack } from '@mui/material';
import { Formik } from 'formik';
import { useRouter } from 'next/router';

const axios = require('axios');

const FormEditCategories = ({ category }) => {
  let router = useRouter();
  let initialValues = category;

  let validate = values => {
    const errors = {};
    // if (!values.email) {
    //   errors.email = 'Required';
    // } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    //   errors.email = 'Invalid email address';
    // }
    return errors;
  };

  let onSubmit = async (values, { setSubmitting }) => {
    await axios
      .post('/api/categories/update', values)
      .then(response => {
        console.log(response.data);
        router.replace('/admin/categories');
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <Card>
      <CardHeader title="Edit Categories" titleTypographyProps={{ variant: 'h6' }} />
      <CardContent>
        <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
          {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
            <form onSubmit={handleSubmit}>
              <Grid container spacing={5}>
                <Grid item xs={12}>
                  <TextField
                    fullWidth
                    label="Name"
                    placeholder="e.g. Bakery ... "
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <ShortTextIcon />
                        </InputAdornment>
                      ),
                    }}
                    type="text"
                    name="name"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.name}
                  />
                </Grid>

                <Grid item xs={12}>
                  <TextField
                    fullWidth
                    multiline
                    minRows={10}
                    label="Category detail"
                    placeholder="Category description ... "
                    sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <NotesIcon />
                        </InputAdornment>
                      ),
                    }}
                    type="text"
                    name="description"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.description}
                  />
                </Grid>
                <Grid item xs={12}>
                  <Stack direction="row" gap="1rem">
                    <Button type="submit" variant="contained" size="large">
                      Save
                    </Button>

                    <Link href="/admin/categories">
                      <Button variant="outlined" size="large">
                        Cancel
                      </Button>
                    </Link>
                  </Stack>
                </Grid>
              </Grid>
            </form>
          )}
        </Formik>
      </CardContent>
    </Card>
  );
};

export default FormEditCategories;
