import React, { useEffect, useState } from 'react';
import '../../assets/styles/modal.css'
import '../../assets/styles/itembox.css'
import FormUpdateItem from '../form/formUpdateItem';
import {Image } from '../parts/image'



// Composant Description
const Description = ({ title, children }) => {
  return (
    <div className="description">
          <h2 className="text-ellipsis">{title}</h2>
      {children}
    </div>
  );
};

// Composant Caractéristique
const Characteristic = ({ label, value }) => {

  return (
    <div className="characteristic">
      <strong>{label}:</strong> {value}
    </div>
  );
};



// Composant Détails du Produit
export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {

    const [isModalOpen, setIsModalOpen] = useState(false);

    // Fonction pour ouvrir la fenêtre modale
    const openModal = () => {
        setIsModalOpen(true);
    };

    // Fonction pour fermer la fenêtre modale
    const closeModal = () => {
        setIsModalOpen(false);
    };
    



    let productname = brand + " " + model;
    let formatedPrice = price + "€";
    let formatedDate = new Date(purchaseDate).toLocaleDateString('fr-FR');

    let request = brand + " " + model

    return (
        <div className="product-details" > 
            <Description title={productname} >
                <Image request={request} _id={_id} alt="Product" />
                <Characteristic label="Model" value={model} />
                <Characteristic label="Brand" value={brand} />
                <Characteristic label="Purchase Date" value={formatedDate} />
                <Characteristic label="Price" value={formatedPrice} />
                {/* Bouton d'édition pour ouvrir la fenêtre modale */}
                <button onClick={openModal}>Edit</button>
            </Description>
            {/* Fenêtre modale */}
            {isModalOpen && (
                <div className="modal">
                    <div className="modal-content">
                        <span className="close" onClick={closeModal}>&times;</span>
                        <FormUpdateItem itemId={_id}>{console.log("item ID :" + _id)}</FormUpdateItem>
                    </div>
                </div>
            )}
        </div>
    );
};