lecoffre-back/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx

import React from "react";

// Components

// Stores

// Styles
import classes from "./classes.module.scss";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";

type IProps = {
	toast: IToast;
};

type IState = {
	willClose: boolean;
};

export default class ToastElement extends React.Component<IProps, IState> {
	private closeTimeout = 0;
	constructor(props: IProps) {
		super(props);

		this.state = {
			willClose: false,
		};

		this.onClose = this.onClose.bind(this);
	}

	public override render(): JSX.Element {
		const toast = this.props.toast;
		const style = {
			"--data-duration": `${toast.time}ms`,
		} as React.CSSProperties;
		return (
			<div className={classes["root"]} data-will-close={this.state.willClose}>
				{toast.time !== 0 && <div className={classes["loadbar"]} style={style} />}
				<div className={classes["header"]}>
					<div className={classes["text-icon_row"]}>
						{toast.icon && toast.icon}
						<div className={classes["text-container"]}>
							{this.getToastTitle(toast.title)}
							{this.getToastText(toast.text)}
						</div>
					</div>
					{/* {toast.closable && <Cross className={classes["cross"]} onClick={this.onClose} />} */}
				</div>
				{toast.button}
			</div>
		);
	}

	public override componentDidMount() {
		if (this.props.toast.time === 0) return;

		this.closeTimeout = window.setTimeout(() => {
			this.close();
		}, this.props.toast.time);
	}

	private getToastTitle(title: string | React.ReactNode) {
		if (typeof title === "string") {
			return (
				<Typography typo={ITypo.P_16}>
					{title}
				</Typography>
			);
		}
		return title;
	}

	private getToastText(text: React.ReactNode) {
		if (typeof text === "string") {
			return (
				<div className={classes["text-container"]}>
					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
						{text}
					</Typography>
				</div>
			);
		}
		return text;
	}

	private onClose(e: React.MouseEvent) {
		e.preventDefault();
		e.stopPropagation();
		this.close();
	}

	private close() {
		window.clearTimeout(this.closeTimeout);
		this.setState({
			willClose: true,
		});
		setTimeout(() => {
			Toasts.getInstance().close(this.props.toast);
		}, 200);
	}
}