import { Row } from "antd";
import classNames from "classnames";
import { Icon } from "components/Icon";
import React, { useEffect, useState } from "react";
import "./ImagePlaceholder.scss";

interface IProps {
  src: string;
  imageClassName?: string;
  skeletonClassName?: string;
  isDark?: boolean;
}

const ImagePlaceholder = ({ src, imageClassName = "" }: IProps) => {
  const [isLoaded, setLoaded] = useState(false);
  const [isError, setError] = useState(false);
  const imgEl: any = React.useRef(null);

  useEffect(() => {
    if (imgEl.current?.complete) {
      setLoaded(true);
    }
  }, []);

  return (
    <div className={`image-placeholder`}>
      {src && !isError && (
        <img
          ref={imgEl}
          className={isLoaded ? imageClassName : "d--none"}
          src={src}
          alt="avatar"
          onLoad={() => setLoaded(true)}
          onError={() => {
            setLoaded(false);
            setError(true);
          }}
        />
      )}
      {isError || !src ? (
        <Row
          align="middle"
          justify="center"
          className={classNames("image-placeholder__empty", {})}
        >
          <Icon name="no-photo" fill={"#121212"} />
        </Row>
      ) : (
        <Row
          align="middle"
          justify="center"
          className={classNames("image-placeholder__empty", {
            "d--none": isLoaded && !!src,
          })}
        >
          <Icon name="no-photo" fill={"#121212"} />
        </Row>
      )}
    </div>
  );
};

export default ImagePlaceholder;
