import {
  Input,
  TableCell,
  Typography,
  Divider,
  Table,
  TableBody,
  TableRow,
  Grid,
  MenuItem,
  Select,
} from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useNavigate } from 'react-router-dom';
import { CATEGORIES } from '../common/constants';

const useStyles = makeStyles({
  root: { margin: '2em 0', padding: '0 15%' },
  title: {
    padding: '17px 0',
    fontSize: '18px',
    color: '#222222',
    fontWeight: 'bold',
  },
  input: {
    border: '1px solid #d6d6d6',
    minHeight: '31px',
    padding: '0 10px',
    fontSize: '12px',
  },
  multiline: {
    border: '1px solid #d6d6d6',
    minHeight: '31px',
    padding: '6px 10px',
    fontSize: '12px',
  },
  registerbutton: {
    margin: '10px 0',
    height: '45px',
    width: '150px',
    backgroundColor: '#000',
    color: '#ffffff',
    fontWeight: 600,
    fontSize: '14px',
    border: '1px solid #000',
    '&:hover': {
      backgroundColor: '#333',
    },
  },
  cancelbutton: {
    margin: '10px 0',
    height: '45px',
    width: '150px',
    backgroundColor: '#fff',
    color: '#000',
    fontWeight: 600,
    fontSize: '14px',
    border: '1px solid #000',
  },
  link: {
    fontSize: 13,
    margin: '1em 0',
    display: 'flex',
    justifyContent: 'center',
    columnGap: 5,
  },
  tableCell: {
    padding: '10px 15px',
    fontSize: '12px',
    backgroundColor: '#fbfbfb',
    fontWeight: 'bold',
  },
  table: {
    borderCollapse: 'separate',
    boxSizing: 'border-box',
    textIndent: 'initial',
    borderColor: 'gray',
  },
});

const Seller = () => {
  const classes = useStyles();
  const navigate = useNavigate();

  return (
    <div className={classes.root}>
      <Typography className={classes.title}>Upload a new product</Typography>
      <Divider style={{ backgroundColor: 'black' }} />
      <form>
        <Table className={classes.table}>
          <caption>▪ Required fields</caption>
          <TableBody>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                ▪ Product name
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  fullWidth
                  disableUnderline
                  required
                  name="name"
                  type="text"
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                ▪ Product category
              </TableCell>
              <TableCell>
                <Select
                  className={classes.input}
                  fullWidth
                  disableUnderline
                  required
                  name="name"
                  select
                >
                  {CATEGORIES.map((cat) => (
                    <MenuItem key={cat} value={cat}>
                      {cat}
                    </MenuItem>
                  ))}
                </Select>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                ▪ Product Image URL
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  fullWidth
                  disableUnderline
                  required
                  name="product image"
                  type="text"
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                ▪ Product Description
              </TableCell>
              <TableCell>
                <Input
                  className={classes.multiline}
                  fullWidth
                  disableUnderline
                  required
                  name="description"
                  type="text"
                  multiline
                  rows={5}
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                ▪ Product Price
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  fullWidth
                  disableUnderline
                  required
                  name="price"
                  type="number"
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                ▪ Shipping Cost
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  fullWidth
                  disableUnderline
                  required
                  name="shippingCost"
                  type="number"
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                Discount (in %)
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  fullWidth
                  disableUnderline
                  name="discount"
                  type="number"
                  defaultValue={0}
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.tableCell}
              >
                ▪ Available Stocks
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  fullWidth
                  disableUnderline
                  required
                  name="stocks"
                  type="number"
                />
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
        <Grid container spacing={2} justify="center">
          <Grid item>
            <button
              className={classes.cancelbutton}
              onClick={() => navigate('/')}
            >
              Cancel
            </button>
          </Grid>
          <Grid item>
            <button className={classes.registerbutton} type="submit">
              Upload
            </button>
          </Grid>
        </Grid>
      </form>
    </div>
  );
};

export default Seller;