import SectionContainer from '../components/SectionContainer';
import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { Typography, Button, Dialog, DialogTitle, DialogContent } from '@mui/material';
import AddProductForm from './AddProductForm';

const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'company', headerName: 'Company', flex: 1 },
    { field: 'name', headerName: 'Name', flex: 1 },
    { field: 'price', headerName: '$', width: 100, type: 'number' },
    { field: 'provider', headerName: 'Provider', flex: 1 },
    { field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
    { field: 'category', headerName: 'Category', flex: 1 }
];

export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
    const [rows, setRows] = useState([
    { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home' },
    { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home' },
    { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home' },
    { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home' },
    { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home' }
  ]);

  const [open, setOpen] = useState(false);

  const handleAddProduct = (newProduct) => {
    const id = rows.length + 1;
    setRows([...rows, { id, company: 'Fendi casa', ...newProduct }]);
    setOpen(false);
  };

    return (

        <SectionContainer sx={{width: '100%' }}>
            <Typography variant="h6" gutterBottom>
                Product Catalog
            </Typography>

             <Button variant="contained" color="primary" onClick={() => setOpen(true)} sx={{ mb: 2 }}>
                Add Product
            </Button>

            <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
                <DialogTitle>Add Product</DialogTitle>
                <DialogContent>
                <AddProductForm onAdd={handleAddProduct} />
                </DialogContent>
            </Dialog>


            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]} />
        </SectionContainer>
    );
}