import Image from "next/image";
import { DetailedHTMLProps, HTMLAttributes, useState } from "react";
import { BsFileEarmarkPdf } from "react-icons/bs";
import { GrDocument } from "react-icons/gr";

interface IFileRender
  extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  src: string;
  name: string;
  width?: number;
}

const FileRenderer: React.FC<React.PropsWithChildren<IFileRender>> = ({
  src,
  name,
  width = 80,
  ...rest
}) => {
  // const [extension, setExtension] = useState("");
  const [imageHeight, setImageHeight] = useState(0);

  // Pega a extensão do arquivo
  // setExtension(file.name.split(".").pop());
  const extension = name?.split(".").pop();

  // Renderiza o arquivo de acordo com a extensão
  switch (extension) {
    case "jpg":
    case "jpeg":
    case "png":
    case "webp":
    case "avif":
      return (
        <figure {...rest}>
          <Image
            src={src}
            alt={name}
            width={width}
            onLoad={(event: any) => {
              const height =
                event.target.naturalHeight *
                (width / event.target.naturalWidth);
              setImageHeight(height);
            }}
            height={imageHeight}
          />
        </figure>
      );
    case "mp4":
    case "webm":
      return (
        <figure {...rest}>
          <video src={src} />
        </figure>
      );
    case "pdf":
      return (
        <figure {...rest} style={{ ...rest.style, backgroundColor: "white" }}>
          <BsFileEarmarkPdf size={28} color="red" />
        </figure>
      );
    default:
      return (
        <figure {...rest} style={{ ...rest.style, backgroundColor: "white" }}>
          <GrDocument className={`w-5/6`} />
        </figure>
      );
    // return <Skeleton {...rest} />;
  }
};

export default FileRenderer;