/**
 * Modal component for displaying a Bootstrap modal
 * 
 * Props:
 * show (boolean): Whether to show the modal
 * title (string or jsx): The title of the modal, allows jsx for custom titles
 * children (node): The content of the modal
 * onClose (function): Function to call when the modal is closed (x button or close button)
 * closeLabel (string): Label for the close button (default: "Close")
 * onSave (function): Function to call when the save button is clicked
 * saveLabel (string): Label for the save button (default: "Save")
 * customFooter (jsx): Custom footer content, ignores default onSave (optional)
 * id (string): ID for the modal (default: "ims-modal")
 * modalSize (string): Size of the modal ('small', 'large', 'xlarge') (optional)
 */

const Modal = (props) => {
  const {
    show,
    title,
    children,
    onClose,
    closeLabel,
    onSave,
    saveLabel,
    customFooter,
    id,
    modalSize // 'small', 'large', 'xlarge' (optional)
  } = props;
  const modalId = id || 'ims-modal';
  const hasFooter = onClose || onSave || customFooter;
  const defaultCloseLabel = window.globalLabels?.close;
  const defaultSaveLabel = window.globalLabels?.save;
  const sizeClass = modalSize === 'small' ? 'modal-sm' : modalSize === 'large' ? 'modal-lg' : modalSize === 'xlarge' ? 'modal-xl' : '';
  const modalRef = React.useRef(null);

  React.useEffect(() => {
    const modalElement = document.getElementById(modalId);
    if (!modalElement) return;

    if (!modalRef.current) {
      modalRef.current = new window.bootstrap.Modal(modalElement);
    }

    const modal = modalRef.current;

    if (show) {
      modal.show();
    } else {
      // Move focus out of the modal before hiding to prevent aria-hidden warning
      if (document.activeElement && modalElement.contains(document.activeElement)) {
        document.activeElement.blur();
      }
      modal.hide();
    }

    return () => {
      // Cleanup on unmount
      if (document.activeElement && modalElement.contains(document.activeElement)) {
        document.activeElement.blur();
      }
      modal.hide();
    };
  }, [show, modalId]);

  return (
    <div
      className="modal fade"
      id={modalId}
      tabIndex="-1"
      aria-hidden="true"
      data-bs-backdrop="static" // Don't allow the modal to dismiss by clicking outside
    >
      <div className={`modal-dialog ${sizeClass}`}>
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">{title}</h5>
            <button
              type="button"
              className="btn-close"
              aria-label={closeLabel || defaultCloseLabel}
              onClick={onClose}
            ></button>
          </div>
          <div className="modal-body">{children}</div>
          {hasFooter && !customFooter && (
            <div className="modal-footer">
              {onClose &&
                <button
                  type="button"
                  className="btn btn-secondary"
                  onClick={onClose}
                  aria-label={closeLabel || defaultCloseLabel}
                >
                  {closeLabel || defaultCloseLabel}
                </button>
              }
              {onSave &&
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={onSave}
                  aria-label={saveLabel || defaultSaveLabel}
                >
                  {saveLabel || defaultSaveLabel}
                </button>
              }
            </div>
          )}
          {customFooter &&
            <div className="modal-footer">
              {customFooter}
            </div>
          }
        </div>
      </div>
    </div>
  );
};

window.Modal = Modal;