// ** 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 AccountOutline from 'mdi-material-ui/AccountOutline';
import MessageOutline from 'mdi-material-ui/MessageOutline';
import { Link, Stack } from '@mui/material';
import { Formik } from 'formik';
import { useRouter } from 'next/router';

const axios = require('axios');

const FormViewProduct = ({ product }) => {
  return (
    <Card>
      <CardHeader title="View Products" titleTypographyProps={{ variant: 'h6' }} />
      <CardContent>
        <Grid container spacing={5}>
          <Grid item xs={12}>
            <div
              style={{
                width: '600px',
                height: '400px',
                backgroundImage: `url('/api/files/get?dir_prefix=${product.product_image}')`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
              }}
            ></div>
          </Grid>

          <Grid item xs={12}>
            <TextField
              disabled
              fullWidth
              label="Name"
              placeholder="e.g. French Baguette"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <ShortTextIcon />
                  </InputAdornment>
                ),
              }}
              type="text"
              name="name"
              value={product.name}
            />
          </Grid>

          <Grid item xs={12}>
            <TextField
              disabled
              fullWidth
              multiline
              minRows={10}
              label="Product detail"
              placeholder="Product detail insert here"
              sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <NotesIcon />
                  </InputAdornment>
                ),
              }}
              type="text"
              name="description"
              value={product.description}
            />
          </Grid>
          <Grid item xs={12}>
            <Link href="/admin/products">
              <Button variant="contained" size="large">
                {'<'} Back
              </Button>
            </Link>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default FormViewProduct;
