import React from 'react';
import { SessionModal } from './SessionModal';
import { SessionButton } from './SessionButton';

interface Props {
  message: string;
  title: string;
  onOk?: any;
  onClose?: any;
  onClickOk: any,
  onClickClose: any,
  okText?: string;
  cancelText?: string;
  hideCancel: boolean;
}

export class SessionConfirm extends React.Component<Props> {
  public static defaultProps = {
    title: '',
    hideCancel: false,
  }

  constructor(props: any) {
    super(props);
  }

  public render() {
    const { title,
            message,
            onClickOk,
            onClickClose,
            hideCancel,
          } = this.props;

    const okText = this.props.okText || window.i18n('ok');
    const cancelText = this.props.cancelText || window.i18n('cancel');
    const showHeader = !! this.props.title;

    return (
        <SessionModal
          title={title}
          onClose={() => null}
          onOk={() => null}
          showExitIcon={false}
          showHeader={showHeader}
        >
          { showHeader ? null : (
            <div className="spacer-lg"></div>
          )}

          <div className="session-modal__centered">
            <span className="text-subtle">
              {message}
            </span>
          </div>

          <div className="spacer-lg"></div>

          <div className="session-modal__button-group">
            <SessionButton
              text={okText}
              onClick={onClickOk}
            />

            { hideCancel ? null : (
              <SessionButton
                text={cancelText}
                onClick={onClickClose}
              />
            )}
            </div>
        </SessionModal>
    );
  }

}