import Link from "next/link";
import React from "react";

import OldModal, { IProps as IPropsModal } from "..";
import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
import classes from "./classes.module.scss";

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

type IState = {};

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

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

	private footer(): JSX.Element | null {
		if (!this.props.showButtons) return null;
		return (
			<div className={classes["buttons-container"]}>
				{this.props.showCancelButton &&
					(this.props.cancelPath ? (
						<Link href={this.props.cancelPath} className={classes["sub-container"]}>
							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.props.onClose}>
								{this.props.cancelText}
							</Button>
						</Link>
					) : (
						<div className={classes["sub-container"]}>
							<Button
								variant={EButtonVariant.PRIMARY}
								styleType={EButtonStyleType.OUTLINED}
								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.canConfirm} fullwidth>
						{this.props.confirmText}
					</Button>
				</div>
			</div>
		);
	}
}