import React, { useState, useEffect } from 'react';
import yellowSuit from './assets/suitmeister-gul-kostym.jpg';
import axios from 'axios';
import noNotificationsImage from './assets/emoji2.png'; // Import your no notifications image
import './ProfilePage.css'; // Import the CSS file
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { addProduct, getLoggedInUser, getAllProducts } from './utils/api';

const user2 = [
  { name: 'GÖRAN', email: 'pengarfinns@inte.nu', age: '48', profilePicture: yellowSuit }
];

const sizes = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'];




const ProfilePage = () => {
  // Accessing the first element of the user array
  const currentUser = user2[0];

  //const [products, setProducts] = useState(initialProducts);

  // State to manage modal visibility
  const [open, setOpen] = useState(false);

  // State to manage form data
  const [formData, setFormData] = useState({
    name: '',
    picture: null,
    price: '',
    rentPrice: '',
    size: '',
    user_id: 1,
  });

  // State to manage notifications
  const [notifications, setNotifications] = useState([
    'Your order has been shipped!',
    'You have a new message from support.',
    'Your profile has been updated successfully.'
  ]);

  // Function to remove a notification
  const removeNotification = (index) => {
    setNotifications(notifications.filter((_, i) => i !== index));
  };

  // Function to handle opening the modal
  const handleClickOpen = () => {
    setOpen(true);
  };

  // Function to handle closing the modal
  const handleClose = () => {
    setOpen(false);
  };

  // Function to handle form input changes
  const handleChange = (e) => {
    const { name, value, files } = e.target;
    setFormData({
      ...formData,
      [name]: files ? files[0] : value,
    });
  };

  // Function to handle form submission
  const handleSubmit = async (event) => {
    event.preventDefault();
  
    const newProduct = {
      name: formData.name,
      picture: formData.picture,
      price: formData.price,
      rentPrice: formData.rentPrice,
      size: formData.size,
      userID: user,
    };
  
    try {
      const result = await addProduct(newProduct.picture, newProduct.price, newProduct.rentPrice, newProduct.name, newProduct.size, newProduct.userID);
      
      if (result === 201) { // Assuming 201 is the status code for successful creation
        setProducts([...products, result.data]); // Assuming the API returns the new product data
        console.log('Product added successfully:', result.data);
        window.location.reload(); 
        handleClose(); // Close the modal or form
      } 
    } catch (error) {
      console.error('Error adding product:', error);
    }
  };


  

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [user, setUser] = useState(null);
const [loadingUser, setLoadingUser] = useState(true);
  const [errorUser, setErrorUser] = useState(null);
  
  const [products, setProducts] = useState([]);
  const [loadingProducts, setLoadingProducts] = useState(true);
  const [errorProducts, setErrorProducts] = useState(null);

//const [categories, setUser] = useState([]);
//const [loadingCategories, setLoadingUser] = useState(true);
//const [errorCategories, setErrorUser] = useState(null);


//const initialProducts = [
//  { name: 'Nunna', picture: nun, price: '29.99' },
//  { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
//  { name: 'Nunna', picture: nun, price: '29.99' },
//  { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
//  { name: 'Nunna', picture: nun, price: '29.99' },
//  { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
  //];
  
//useEffect(() => {
//  axios.get('http://127.0.0.1:8000/themeApp/user/')
//    .then(response => {
//      setUser(response.data.user);
//      console.log("SUcccesss : ", response.data.user);
//      setLoadingUser(false);
//    })
//    .catch(error => {
//      setErrorUser(error);
//      setLoadingUser(false);
//    });
//}, [])
//if (loading) return <p>Loading...</p>;
//if (error) return <p>Error loading products: {error.message}</p>;
  
  // Fetch user when the component mounts
  useEffect(() => {
    const fetchUser = async () => {
      try {
        const result = await getLoggedInUser();
        setUser(result.id);
        // You can perform additional actions here, like updating the UI
      } catch (error) {
        console.error('Error:', error);
        setErrorUser(error);
      } finally {
        setLoadingUser(false);
      }
    };

    fetchUser();
  }, []); 
  
  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const result = await getAllProducts();
  
        if (user) {
          const filteredProducts = result.data.filter(product => product.user_id === user);
          setProducts(filteredProducts);
        } else {
          console.warn('User ID is null or undefined');
        }
      } catch (error) {
        console.error('Error:', error);
        setErrorProducts(error);
      } finally {
        setLoadingProducts(false);
      }
    };
  
    fetchProducts();
  }, [user]); // Include user in the dependency array

  return (
    <div className="container">
      <div className="header">
        <h1 className="headerText">Välkommen, {currentUser.name}!</h1>
      </div>
      <div className="profile">
        <img src={currentUser.profilePicture} alt="Profile" className="profilePicture" />
        <div className="profileInfo">
          <h2>Användarinformation:</h2>
          <p>Namn: {currentUser.name}</p>
          <p>Email: {currentUser.email}</p>
          {/* Add more user information fields as needed */}
        </div>
      </div>
       <Box sx={{display: 'flex', justifyContent:'center'}}>
        <Button variant="contained" onClick={handleClickOpen}>Lägg till ny produkt</Button>      
      </Box>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Lägg till ny produkt</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            name="name"
            label="Product Name"
            type="text"
            fullWidth
            variant="standard"
            value={formData.name}
            onChange={handleChange}
          />
          <TextField
            margin="dense"
            name="price"
            label="Price"
            type="number"
            fullWidth
            variant="standard"
            value={formData.price}
            onChange={handleChange}
          />
          <TextField
            margin="dense"
            name="rentPrice"
            label="Daily Rent Price"
            type="number"
            fullWidth
            variant="standard"
            value={formData.rentPrice}
            onChange={handleChange}
          />
          <TextField
            margin="dense"
            name="size"
            label="Size"
            select
            fullWidth
            variant="standard"
            value={formData.size}
            onChange={handleChange}
          >
            {sizes.map((size) => (
              <MenuItem key={size} value={size}>
                {size}
              </MenuItem>
            ))}
          </TextField>
          <input
            accept="image/*"
            style={{ display: 'none' }}
            id="upload-image"
            type="file"
            name="picture"
            onChange={handleChange}
          />
          <label htmlFor="upload-image">
            <Button variant="contained" component="span">
              Upload Image
            </Button>
          </label>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleSubmit} variant="contained">Lägg till produkt</Button>
        </DialogActions>
      </Dialog>
      <div className="mainContent">
        <div className="productListContainer">
          <h2 style={{ textAlign: 'center' }}>Currently Listed Products:</h2>
          <ul className="productList">
            {products.map((product, index) => (
              <li key={index} className="productItem" style={{ animationDelay: `${index * 0.4}s` }}>
                <img src={product.image} alt={product.name} className="productImage"/>
                <div className="productInfo">
                  <h3 className="productName">{product.name}</h3>
                  <p className="productPrice">Price: ${product.price}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <div className="notificationSection">
          <h2 style={{ textAlign: 'center' }}>Notifications:</h2>
          {notifications.length === 0 ? (
            <div className="noNotifications">
              <p className="noNotificationsText">No notifications at the moment</p>
              <img src={noNotificationsImage} alt="No Notifications" className="noNotificationsImage" />
            </div>
          ) : (
            <ul className="notificationList">
              {notifications.map((notification, index) => (
                <li key={index} className="notificationItem">
                  {notification}
                  <button onClick={() => removeNotification(index)} className="removeButton">Mark as Read</button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
     
    </div>
  );
};

export default ProfilePage;