import React from "react";
import Modal, { IProps as IPropsModal } from "..";
import Button, { EButtonVariant } from "../../Button";
import classes from "./classes.module.scss";

type IProps = IPropsModal & {
	closeText: string | JSX.Element;
};

type IState = {
	isOpen: boolean;
};
export default class Alert extends React.Component<IProps, IState> {
	static defaultProps = {
		closeText: "Ok",
		...Modal.defaultProps
	};

	constructor(props: IProps) {
		super(props);
		this.state = {
			isOpen: this.props.isOpen ?? true,
		}
		this.onClose = this.onClose.bind(this);
	}

	public override render(): JSX.Element | null {
		return (
			<Modal
				closeBtn={this.props.closeBtn}
				isOpen={this.state.isOpen}
				onClose={this.onClose}
				header={this.props.header}
				footer={this.footer()}>
				{this.props.children}
			</Modal>
		);
	}

	private footer(): JSX.Element {
		return (
			<div className={classes["button-container"]}>
				<Button variant={EButtonVariant.SECONDARY} onClick={this.onClose}>
					{this.props.closeText}
				</Button>
			</div>
		);
	}

	private onClose() {
		this.setState({ isOpen: false });
		this.props.onClose?.();
	}
}
