// ** 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, Typography } from '@mui/material';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Loading from 'src/components/Loading';
import fetchCategory from 'src/api/fetchCategory';
import fetchListByCategory from 'src/api/fetchListByCategory';

const FormViewCategory = () => {
  let router = useRouter();
  let { cid } = router.query;

  let [products, setProducts] = useState(null);
  let [category, setCategory] = useState(null);

  useEffect(() => {
    const update = async () => {
      Promise.all([fetchCategory({ cid }), fetchListByCategory({ cid: 1 })])
        .then(([categoryResponse, productsResponse]) => {
          let { data: categoryData } = categoryResponse;
          let { category: fetchedCategory } = categoryData;
          setCategory(fetchedCategory);

          let { data: productsData } = productsResponse;
          let { products: fetchedProducts } = productsData;
          setProducts(fetchedProducts);
        })
        .catch(error => {
          console.error(error);
        });
    };
    if (cid) update();
  }, [cid]);

  if (!category || !products)
    return (
      <>
        <Loading />
      </>
    );

  return (
    <Card>
      <CardHeader title="View Categories" titleTypographyProps={{ variant: 'h6' }} />
      <CardContent>
        <Grid container spacing={5}>
          <Grid item xs={12}>
            <TextField
              disabled
              fullWidth
              label="Name"
              placeholder="e.g. Bakery ... "
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <ShortTextIcon />
                  </InputAdornment>
                ),
              }}
              type="text"
              name="name"
              value={category.name}
            />
          </Grid>

          <Grid item xs={12}>
            <TextField
              disabled
              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"
              value={category.description}
            />
          </Grid>

          <Grid item xs={12}>
            <Typography variant="h6">Product in this category</Typography>
            <ul>
              {products.map(p => {
                return (
                  <li>
                    {p.name}, {p.description} {p.price}
                  </li>
                );
              })}
            </ul>
          </Grid>

          <Grid item xs={12}>
            <Link href="/admin/categories">
              <Button variant="contained" size="large">
                {'<'} Back
              </Button>
            </Link>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default FormViewCategory;
