import React, { useEffect, useRef } from "react";
import useFetch from "../../hooks/useFetch";

const shouldUpdate = (prevProps, nextProps) => {
  // Custom comparison logic based on prevProps and nextProps
  // Return true if props are equal, return false otherwise
  return !prevProps.id === nextProps.id;
};

const ProductListItem = React.memo((props: {
  id: number;
  title: string;
  description: string;
  imgLink: string;
  current: number | null;
  category: string;
  price: number;
  rating: {
    rate: number;
    count: number;
  };
  expandCallback(id: number): void;
}) => {
  const currentElement = useRef(null);
  const {
    get,
    loading: loadingImg,
    error: responseError,
    response: responseImg,
  } = useFetch(`http://localhost:5000/`);
  console.log("responseImg: ", responseImg);

  useEffect(()=>{
    debugger
    const newHeight = (props.current && props.current == props.id) ? `auto` : `8rem`;
    if(currentElement.current) currentElement.current.setAttribute("style",`height:${newHeight}`);
  }, [props])

  const callPythonApp = () => {
    get();
  }

  return (
    <div
      id={props.id.toString()}
      className={`flex tran`}
      onClick={() => {
        // const newHeight = (props.current && props.current == props.id) ? `auto` : `8rem`;
        // if(currentElement.current) currentElement.current.setAttribute("style",`height:${newHeight}`);
        props.expandCallback(props.id);
      }}
      ref={currentElement}
    >
      <div className="mt-auto mb-auto ml-2 mr-2">
        <div className="w-16">
          <img src={props.imgLink}></img>
        </div>
      </div>
      <div className="flex flex-col p-2 pb-3">
        <div className="text-left font-semibold" id="header">
          <span>{props.title}</span>
        </div>
        <div id="content" className="overflow-scroll text-left text-sm">
          <span>{props.description}</span>
          {props.current && props.current == props.id && (
            <div className="flex flex-col">
              <div>
                <span className="font-semibold">Category: </span>{" "}
                <span>{props.category}</span>{" "}
              </div>
              <div>
                <span className="font-semibold">Price: </span>{" "}
                <span>{props.price}</span>
              </div>
              <div>
                <span className="font-semibold">Rating: </span>{" "}
                <span>{props.rating.rate}</span>
              </div>
              <div>
                <span onClick={callPythonApp} className="font-semibold text-blue-web">
                  Click here to get the location
                </span>
                {
                  responseImg && responseImg.image && (
                    <img src={`data:image/jpg;base64,${responseImg.image}`}/>
                  )
                }
                <></>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}, shouldUpdate);

export default ProductListItem;
