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";
import { Description } from "../parts/description";
import { Characteristic } from "../parts/characteristic";

export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  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>
  );
};