import * as React from 'react';
import classNames from 'classnames';
import { LocalizerType } from '../types/Util';

export type OwnProps = {
  readonly i18n: LocalizerType;
  readonly children: React.ReactNode;
  readonly affirmativeText?: string;
  readonly onAffirmative?: () => unknown;
  readonly onClose: () => unknown;
  readonly negativeText?: string;
  readonly onNegative?: () => unknown;
};

export type Props = OwnProps;

function focusRef(el: HTMLElement | null) {
  if (el) {
    el.focus();
  }
}

export const ConfirmationDialog = React.memo(
  ({
    i18n,
    onClose,
    children,
    onAffirmative,
    onNegative,
    affirmativeText,
    negativeText,
  }: Props) => {
    React.useEffect(() => {
      const handler = ({ key }: KeyboardEvent) => {
        if (key === 'Escape') {
          onClose();
        }
      };
      document.addEventListener('keydown', handler);

      return () => {
        document.removeEventListener('keydown', handler);
      };
    }, [onClose]);

    const handleCancel = React.useCallback(
      (e: React.MouseEvent) => {
        if (e.target === e.currentTarget) {
          onClose();
        }
      },
      [onClose]
    );

    const handleNegative = React.useCallback(() => {
      onClose();
      if (onNegative) {
        onNegative();
      }
    }, [onClose, onNegative]);

    const handleAffirmative = React.useCallback(() => {
      onClose();
      if (onAffirmative) {
        onAffirmative();
      }
    }, [onClose, onAffirmative]);

    return (
      <div className="module-confirmation-dialog__container">
        <div className="module-confirmation-dialog__container__content">
          {children}
        </div>
        <div className="module-confirmation-dialog__container__buttons">
          <button
            onClick={handleCancel}
            ref={focusRef}
            className="module-confirmation-dialog__container__buttons__button"
          >
            {i18n('confirmation-dialog--Cancel')}
          </button>
          {onNegative && negativeText ? (
            <button
              onClick={handleNegative}
              className={classNames(
                'module-confirmation-dialog__container__buttons__button',
                'module-confirmation-dialog__container__buttons__button--negative'
              )}
            >
              {negativeText}
            </button>
          ) : null}
          {onAffirmative && affirmativeText ? (
            <button
              onClick={handleAffirmative}
              className={classNames(
                'module-confirmation-dialog__container__buttons__button',
                'module-confirmation-dialog__container__buttons__button--affirmative'
              )}
            >
              {affirmativeText}
            </button>
          ) : null}
        </div>
      </div>
    );
  }
);