import React, {ReactElement} from "react";
import ModalWindowComponentBase, {ModalWindowFullscreenMode, ModalWindowSize} from "./ModalWindowComponentBase.tsx";
import {GetCombinedClassesArray} from "../../../common/Helper.tsx";

export interface ITwoButtonModalWindowComponentProps extends React.PropsWithChildren{
    title: string,
    first_button_text: string,
    first_button_classes: string,
    // first_button_small?: boolean | undefined | null,
    on_first_button_clicked?: () => void,
    first_button_disabled?: boolean | undefined | null,
    
    second_button_text: string,
    second_button_classes: string,
    // second_button_small?: boolean | undefined | null,
    on_second_button_clicked?: () => void,
    second_button_disabled?: boolean | undefined | null,
    
    id? : string | undefined | null,
    labelId? : string | undefined | null,
    tabIndex? : number | null,
    size?: ModalWindowSize | undefined | null,
    fullscreen_mode?: ModalWindowFullscreenMode | undefined | null,
    fade?: boolean | undefined | null,
    vertically_centered?: boolean | undefined | null,
    show?: boolean | undefined | null,
    onExit?: () => void,
    children: ReactElement
}
export default function TwoButtonModalWindowComponent(props: ITwoButtonModalWindowComponentProps){
    const id = props.id != null && props.id != '' ? props.id : Math.random().toString(36).substring(2, 9);
    return (
        <ModalWindowComponentBase show={props.show} size={props.size} fullscreen_mode={props.fullscreen_mode}
                                  id={id} fade={props.fade} showBackdrop={true}
                                  vertically_centered={props.vertically_centered}
                                  respectMouseInsideOut={true}
                                  onOutsideClicked={() => props.onExit?.()}
        >
            <>
                <div className="modal-header">
                    <h5 className="modal-title" id="exampleModalLabel">{props.title}</h5>
                    <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            onClick={() => props.onExit?.()}></button>
                </div>
                <div className="modal-body">
                    {props.children}
                </div>
                <div className="modal-footer">
                    {React.cloneElement((
                            <button type="button" data-bs-dismiss="modal"
                                    onClick={() => props.on_first_button_clicked?.()}
                                    disabled={props.first_button_disabled == true}
                                >
                                {props.first_button_text}
                            </button>
                        ),
                        {
                            className: GetCombinedClassesArray(['btn'], props.first_button_classes?.trim() ?? '')
                        }
                    )}

                    {React.cloneElement((
                            <button type="button" data-bs-dismiss="modal"
                                    onClick={() => props.on_second_button_clicked?.()}
                                    disabled={props.second_button_disabled == true}
                                >
                                {props.second_button_text}
                            </button>
                        ),
                        {
                            className: GetCombinedClassesArray(['btn'], props.second_button_classes?.trim() ?? '')
                        }
                    )}
                </div>
            </>
        </ModalWindowComponentBase>
    );
}