import React, { useEffect, useState } from 'react';
import { searchAndResizeImage } from '../../api/image-request'
import '../../assets/styles/modal.css'
import '../../assets/styles/itembox.css'
import FormUpdateItem from '../form/formUpdateItem';


// Composant Image
const Image = ({ src, alt, request, _id }) => {
    const [cacheUrl, setCacheUrl] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            let cachedUrl = localStorage.getItem(_id);
            if (!cachedUrl) {
                try {
                    cachedUrl = await searchAndResizeImage(request);
                    localStorage.setItem(_id, cachedUrl);
                    console.log("Mise en cache de l'image avec l'ID : " + _id);
                } catch (error) {
                    console.error("Erreur lors de la récupération de l'image : ", error);
                }
            }
            setCacheUrl(cachedUrl);
        };

        fetchData();
    }, [request, _id]);

    if (src) {
        return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;
    } else if (cacheUrl) {
        return <img src={cacheUrl} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;
    } else {
        return <img src={"https://media.discordapp.net/attachments/1164176196930637956/1167746303820840990/IMG_20231028_104620.jpg?ex=663ddefe&is=663c8d7e&hm=0985ce123fd1751f65388f7fefde5db6ce817e514e30f1d3c81eb28b15e78453&=&"} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;
    }
};

// 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}></FormUpdateItem>
                    </div>
                </div>
            )}
        </div>
    );
};