import React, { useState, useEffect } from "react";
import styles from "./page.module.css";
import { energyState } from "./energyState";
import { observer } from "mobx-react-lite";

interface ChoiceImageProps {
  choice: any; // Adjust the type according to your actual 'choice' object structure
  rowIndex: number;
  totalRows: number;
}

const ChoiceImage: React.FC<ChoiceImageProps> = observer(
  ({ choice, rowIndex, totalRows }) => {
    const [opacity, setOpacity] = useState(0);

    const isSelected = energyState.selectedChoices.has(choice.id);

    return (
      <img
        key={choice.id}
        className={`${styles.choiceHoverEffect} ${
          isSelected ? styles.choiceSelected : ""
        }`}
        width={100}
        src={`https://cdn1.suno.ai/image_${choice.id}.png`}
        style={{
          opacity: opacity * (rowIndex !== totalRows && !isSelected ? 0.6 : 1),
          transition: "opacity 0.5s ease-in-out",
          zIndex: isSelected ? 2 : 1,
        }}
        onMouseEnter={() => {
          energyState.playId(choice.id);
        }}
        onLoad={() => {
          setOpacity(1);
        }}
        // onMouseLeave={() => {
        //   energyState.pause();
        // }}
        onClick={() => {
          energyState.getSimilar(choice, rowIndex);
        }}
      />
    );
  }
);

export default ChoiceImage;