import React, { ReactNode } from "react";
import classes from "./classes.module.scss";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import Image, { StaticImageData } from "next/image";
import classNames from "classnames";

type IProps = {
	title: string;
	children?: ReactNode;
	/**
	 * @description scroll top with number or disabled with null
	 */
	scrollTop: number | null;
	image: StaticImageData;
	type: "background" | "image";
};

type IState = {};

export default class DefaultDoubleSidePage extends React.Component<IProps, IState> {
	public static defaultProps = {
		scrollTop: 0,
		type: "background",
	};

	public override render(): JSX.Element {
		return (
			<div className={classes["root"]}>
				<Header isUserConnected={false} />
				<div className={classes["content"]}>
					<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
					{this.props.type === "image" && (
						<div className={classNames(classes["sides"], classes["image-container"])}>
							<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
						</div>
					)}
					{this.props.type === "background" && (
						<div className={classNames(classes["sides"], classes["background-image-container"])}>
							<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} />
						</div>
					)}
				</div>
				<Version />
			</div>
		);
	}

	public override componentDidMount() {
		window.document.title = this.props.title;
		if (this.props.scrollTop !== null) {
			window.scrollTo(0, this.props.scrollTop);
		}
	}
}