import React, { useEffect, useState } from "react";

interface ImageBlurryProps {
  src: string;
  alt?: string;
  classname?: string;
  key?: string | number;
  style?: React.CSSProperties;
  priority?: boolean;
}

const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
  const { src, alt, classname, key, style, priority = false } = props;

  const [imgSrc, setImgSrc] = useState<string>(src);
  const [isError, setIsError] = useState<boolean>(false);

  useEffect(() => {
    setImgSrc(src);
  }, [src]);

  const handleImage = () => {
    const pics = document.querySelectorAll<HTMLImageElement>("img");
    pics.forEach((pic) => {
      if (pic.complete) {
        checkImage(pic);
      } else {
        pic.addEventListener("load", function () {
          checkImage(this);
        });
      }
    });
  };

  const checkImage = (img: HTMLImageElement) => {
    if (img.naturalHeight > img.naturalWidth) {
      img.classList.add("portrait");
    } else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
      img.classList.add("square");
    } else {
      img.classList.add("landscape");
    }
  };

  const onLoad = () => {
    console.log("Image loaded:", src);
    handleImage();
  };

  return (
    // <div className="relative overflow-hidden bg-[#e9e9e9] blurry-wrapper">
    //     <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
    //     <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
    // </div>
    <div
      className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg"
      key={key}
      style={style}
    >
      <div
        className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg"
        style={{ backgroundImage: `url(${imgSrc})` }}
      ></div>
      <div
        className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg"
        style={{ backgroundImage: `url(${imgSrc})` }}
      ></div>
    </div>
  );
};

export default ImageBlurry;