/* eslint-disable @next/next/no-img-element */
import React from "react";

import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
import Loader from "../Loader";

type IProps = {
	href: string;
	fileName?: string;
};
type IState = {};

export default class FilePreview extends React.Component<IProps, IState> {
	override render() {
		let type = this.props.href.split(".").pop();
		if (this.props.fileName) type = this.props.fileName.split(".").pop();
		return (
			<div className={classes["root"]}>
				{!this.props.href && (
					<div className={classes["loader"]}>
						<Loader />
					</div>
				)}

				{this.props.href && (
					<>
						{!type && (
							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
								Erreur lors du chargement du fichier
							</Typography>
						)}
						<div className={classes["file-container"]}>
							{type?.toLowerCase() === "pdf" && (
								<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
							)}
							{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
						</div>
					</>
				)}
			</div>
		);
	}
}
