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

type IProps = IPropsModal & {
	onAccept?: () => void;
	cancelText: string | JSX.Element;
	cancelPath?: string;
	confirmText: string | JSX.Element;
	showCancelButton: boolean;
	isConfirmButtonDisabled: boolean;
};

type IState = {};

export default class Confirm extends React.Component<IProps, IState> {
	static defaultProps = {
		showCancelButton: true,
		cancelText: "Cancel",
		confirmText: "Confirm",
		isConfirmButtonDisabled: false,
		...Modal.defaultProps,
	};

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

	private footer(): JSX.Element {
		return (
			<div className={classes["buttons-container"]}>
				{this.props.showCancelButton &&
					(this.props.cancelPath ? (
						<Link href={this.props.cancelPath} className={classes["sub-container"]}>
							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
								{this.props.cancelText}
							</Button>
						</Link>
					) : (
						<div className={classes["sub-container"]}>
							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose} className={classes["sub-container"]}>
								{this.props.cancelText}
							</Button>
						</div>
					))}
				<div className={classes["sub-container"]}>
					<Button
						variant={EButtonVariant.PRIMARY}
						onClick={this.props.onAccept}
						disabled={this.props.isConfirmButtonDisabled}
						fullwidth>
						{this.props.confirmText}
					</Button>
				</div>
			</div>
		);
	}
}