import React, { 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 pour la mise à jour */}
      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
            <span className="close" onClick={closeModal}>
              &times;
            </span>
            <FormUpdateItem itemId={_id} onClose={closeModal} />
          </div>
        </div>
      )}
    </div>
  );
};