import React, { useEffect, useState } from 'react';
import { searchAndResizeImage } from '../../api/image-request'


// 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 }) => {
    if (title.length >= 30) {
        title = title.slice(0, 22 - 3) + '...'; 
    }
  return (
    <div className="description">
      <h2>{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, onEdit, _id }) => {
    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} />
            </Description>
            <button onClick={onEdit}>Edit</button>
        </div>
    );
};