import React, { useEffect, useState, useCallback } from 'react';
import { 
  Container, 
  List, 
  ListItem, 
  ListItemText,
  TextField,
  Button,
  IconButton, 
  Typography,
} from '@mui/material';
import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
import axios from 'axios';
import { useParams, useLocation } from 'react-router-dom'; 
import ItemDetails from './ItemDetails'; // Import the new ItemDetails component

export default function Items({ token }) {
  const { id: boxId } = useParams(); 
  const [items, setItems] = useState([]);
  const [newItemName, setNewItemName] = useState('');
  const [newItemDescription, setNewItemDescription] = useState('');
  const [newItemImagePath, setNewItemImagePath] = useState('/images/default.jpg');
  const [editingItem, setEditingItem] = useState(null); // Track which item is being edited
  const location = useLocation();
  const boxName = location.state?.boxName || 'Unknown Box';


  const fetchItems = useCallback(() => {
    axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`, {
        headers: { Authorization: `Bearer ${token}` }
    }).then(response => {
        setItems(response.data);
    });
  }, [boxId, token]);

  useEffect(() => {
    fetchItems();
  }, [boxId, token, fetchItems]);

  const handleAddItem = () => {
    axios.post(`${process.env.REACT_APP_API_URL}/items`, 
      { 
        name: newItemName, 
        description: newItemDescription,
        box_id: parseInt(boxId, 10),
      }, 
      {
        headers: { Authorization: `Bearer ${token}` }
      }
    ).then(() => {
      setNewItemName('');
      setNewItemDescription('');
      setNewItemImagePath('');
      fetchItems();
    });
  };

  const handleDeleteItem = (itemId) => {
    axios.delete(`${process.env.REACT_APP_API_URL}/items/${itemId}`, {
      headers: { Authorization: `Bearer ${token}` }
    }).then(() => {
      fetchItems();
    });
  };

  const handleEditItem = (item) => {
    setEditingItem(item); // Set the item to be edited
  };

  const handleSaveEdit = () => {
    setEditingItem(null); // Clear the editing state after saving
    fetchItems(); // Refresh the list after edit
  };

  return (
    <Container>
      <h2>Items in Box: {boxName}</h2>

      {/* Add Item Form */}
      <TextField
        label="Item Name"
        variant="outlined"
        fullWidth
        margin="normal"
        value={newItemName}
        onChange={(e) => setNewItemName(e.target.value)}
      />
      <TextField
        label="Item Description"
        variant="outlined"
        fullWidth
        margin="normal"
        value={newItemDescription}
        onChange={(e) => setNewItemDescription(e.target.value)}
      />
      <TextField 
        label="Item Image Path" 
        variant="outlined" 
        fullWidth 
        margin="normal"
        value={newItemImagePath}
        onChange={(e) => setNewItemImagePath(e.target.value)} 
      />
      <Button variant="contained" color="primary" onClick={handleAddItem}>
        Add Item
      </Button>

      {/* Conditionally render the ItemDetails component if editingItem is not null */}
      {editingItem ? (
        <ItemDetails item={editingItem} token={token} onSave={handleSaveEdit} />
      ) : (
        <List>
        {items.map((item) => (
          <ListItem key={item.ID} secondaryAction={
            <>
              <IconButton edge="end" onClick={() => handleEditItem(item)}>
                <EditIcon />
              </IconButton>
              <IconButton edge="end" onClick={() => handleDeleteItem(item.ID)}>
                <DeleteIcon />
              </IconButton>
            </>
          }>
            <ListItemText 
              primary={item.name} 
              secondary={
                <>
                  <Typography variant="body2">{item.description}</Typography>
                  {item.image_path && (
                    <Typography variant="caption">Image: {item.image_path}</Typography>
                  )}
                </>
              } 
            />
          </ListItem>
        ))}
        </List>
      )}
    </Container>
  );
}