import React, { useState } from 'react';
import { Box, Button, TextField, Typography, Grid } from '@mui/material';

export default function AddProductForm({ onAdd }) {
  const [product, setProduct] = useState({
    name: '',
    price: '',
    supplier: '',
    stock: '',
    category: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProduct((prev) => ({ ...prev, [name]: value }));
  };

 const handleSave = () => {
    if (onAdd) {
      onAdd(product);
      setProduct({ name: '', price: '', provider: '', stock: '', category: '' });
    }
  };

  const handleDelete = () => {
    console.log('Deleting product');
  };

  const handleUpdate = () => {
    console.log('Updating product:', product);
  };

  return (
    <Box
      sx={{
        maxWidth: 400,
        mx: 'auto',
        mt: 4,
        p: 3,
        borderRadius: 2,
        boxShadow: 3,
        bgcolor: 'white',
      }}
    >
      <Typography variant="h6" gutterBottom textAlign="center" color='black'>
        Add Products
      </Typography>

      <TextField
        fullWidth
        label="Company"
        name="company"
        value={product.company || ''}
        onChange={handleChange}
        margin="normal"
      />

      <TextField
        fullWidth
        label="Name"
        name="name"
        value={product.name}
        onChange={handleChange}
        margin="normal"
      />
      <TextField
        fullWidth
        label="Price"
        name="price"
        type="number"
        value={product.price}
        onChange={handleChange}
        margin="normal"
      />
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <TextField
            fullWidth
            label="Provider"
            name="provider"
            value={product.provider || ''}
            onChange={handleChange}
            margin="normal"
          />
        </Grid>
        <Grid item xs={6}>
          <TextField
            fullWidth
            label="Stock"
            name="stock"
            type="number"
            value={product.stock}
            onChange={handleChange}
            margin="normal"
          />
        </Grid>
      </Grid>
      <TextField
        fullWidth
        label="Category"
        name="category"
        value={product.category}
        onChange={handleChange}
        margin="normal"
      />

      <Box display="flex" justifyContent="space-between" mt={2}>
        <Button variant="contained" color="primary" onClick={handleSave}>
          Save
        </Button>
        <Button variant="outlined" onClick={handleDelete}>
          Delete
        </Button>
        <Button variant="outlined" onClick={handleUpdate}>
          Update
        </Button>
      </Box>
    </Box>
  );
}