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

export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
  const [product, setProduct] = useState({
    name: '',
    price: '',
    provider: '',
    stock: '',
    category: ''
  });

  useEffect(() => {
    if (initialData) {
      setProduct(initialData);
    } else {
      setProduct({
        name: '',
        price: '',
        provider: '',
        stock: '',
        category: ''
      });
    }
  }, [initialData]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProduct((prev) => ({
      ...prev,
      [name]: name === 'price' || name === 'stock' ? Number(value) : value
    }));
  };

  const handleSubmit = () => {
    if (onAdd) {
      onAdd(product);
    }
  };

  return (
    <Box mt={2}>
      <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 mt={2}>
      {/* Fields... */}
      <Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
        <Button onClick={onCancel}>Cancel</Button>
        <Button variant="contained" onClick={handleSubmit}>Save</Button>
      </Box>
    </Box>
    </Box>
  );
}