import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.css";
import { useApi } from "@/api";
import { getRandomArbitrary } from "@/services/random-value";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { selectors } from "@/store";

interface IEnergyVampirismProps {
  onClick: () => void;
}

function EnergyVampirism({ onClick }: IEnergyVampirismProps): JSX.Element {
  const api = useApi();
  const { translate } = useTranslations();
  const [backgroundUrl, setBackgroundUrl] = useState("");
  const name = useSelector(selectors.selectUser).username;

  const getImage = async () => {
    try {
      const categoryId = "au.energy_vampirism";
      const assets = (
        await api.getAssets({ category: String(categoryId || "1") })
      ).assets;
      const randomAsset = assets[getRandomArbitrary(0, assets.length - 1)];
      setBackgroundUrl(randomAsset?.url || "");
    } catch (error) {
      console.error("Error: ", error);
    }
  };

  useEffect(() => {
    getImage();
  }, []);

  return (
    <div
      className={styles.container}
      style={{ backgroundImage: `url(${backgroundUrl})` }}
      onClick={onClick}
    >
      <p className={styles.period}>Today</p>
      <p className={styles.text}>
        {name?.length ? `${name}, ` : ""}
        Discover the {translate("Find out if you're an energy vampire today or not?")}
      </p>
      {/* <div className={styles.blur}></div> */}
    </div>
  );
}

export default EnergyVampirism;
