/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable camelcase */
/* eslint-disable no-nested-ternary */
/* eslint-disable promise/always-return */
/* eslint-disable promise/catch-or-return */
/* eslint-disable react/no-this-in-sfc */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable react/function-component-definition */
import { Image as ImageAntd } from "antd";
import { FC, useEffect, useState } from "react";
import * as React from "react";

// eslint-disable-next-line camelcase
import icon_push_img from "../../../../../assets/icons/icon_push_img.svg";

type Props = {
  url: string;
  [p: string]: any;
  onClick?: () => void;
  errUrl?: string;
  showPreview?: boolean;
  className?: string;
  style?: React.CSSProperties;
  onlySkeleton?: boolean;
};

const ImageSkeleton: FC<Props> = (props) => {
  const { url, onClick, errUrl, showPreview, onlySkeleton } = props;
  const [isLoaded, setIsLoaded] = useState(false);
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const imageExist = (url: string) => {
    return new Promise((resolve) => {
      let img = new Image();
      img.onload = function () {
        // @ts-ignore
        if (this.complete === true) {
          resolve(true);
          // @ts-ignore
          img = null;
        }
      };
      img.onerror = function () {
        // @ts-ignore
        img = null;
        resolve(true);
      };
      img.src = url;
    });
  };
  useEffect(() => {
    imageExist(url).then((res) => {
      setIsLoaded(res as boolean);
    });
  }, [url]);
  useEffect(() => {}, []);
  return showPreview ? (
    <ImageAntd
      // placeholder={img_placeholder}
      onError={(e: any) => {
        e.target.src = errUrl || icon_push_img;
      }}
      {...props}
      onClick={onClick}
      className={`image_skeleton ${!isLoaded ? "image_skeleton_active" : ""} ${props.className}`}
      src={url}
    />
  ) : onlySkeleton ? (
    <div className={`image_skeleton image_skeleton_active ${props.className}`} />
  ) : (
    <img
      // placeholder={img_placeholder}
      onError={(e: any) => {
        e.target.src = errUrl || icon_push_img;
      }}
      {...props}
      onClick={onClick}
      className={`image_skeleton ${!isLoaded ? "image_skeleton_active" : ""} ${props.className}`}
      src={url}
      alt=""
    />
  );
};
export default ImageSkeleton;
