import React from "react"
import _ from "lodash"
import ModalPopupComponent from "./ModalPopupComponent"

export interface ActionCancelModalComponentProps {
  /** Title of modal */
  title?: React.ReactNode
  /** Action button. Defaults to "Save" */
  actionLabel?: React.ReactNode
  /** Cancel button. Defaults to "Cancel" if action, "Close" otherwise */
  cancelLabel?: React.ReactNode
  /** Label of delete button. Default "Delete" */
  deleteLabel?: React.ReactNode
  /** Called when action button is clicked */
  onAction?: () => void
  /** Called when cancel is clicked */
  onCancel?: () => void
  /** Big red destuctive action in footer. Not present if null */
  onDelete?: () => void
  /** "large" for large, "full" for full width */
  size?: "large" | "full" | "normal" | "small" | "x-large"
  /** True for action button to show spinner and be disabled */
  actionBusy?: boolean
  /** True for delete button to show spinner and be disabled */
  deleteBusy?: boolean
  /** True for action button to be disabled */
  actionDisabled?: boolean
  /** Children to display in modal */
  children?: React.ReactNode
}

// Modal with action and cancel buttons
export default class ActionCancelModalComponent extends React.Component<ActionCancelModalComponentProps> {
  render() {
    return (
      <ModalPopupComponent
        size={this.props.size}
        header={this.props.title}
        footer={[
          this.props.onDelete ? (
            <button key="delete" type="button" onClick={this.props.onDelete} className="btn btn-danger me-auto">
              {this.props.deleteBusy ? (
                <>
                  <i className="fa fa-spinner fa-spin" />
                  &nbsp;
                </>
              ) : null}
              {this.props.deleteLabel || T`Delete`}
            </button>
          ) : undefined,
          this.props.onAction ? (
            <button
              key="action"
              type="button"
              onClick={this.props.onAction}
              disabled={this.props.actionBusy || this.props.actionDisabled}
              className="btn btn-primary"
            >
              {this.props.actionBusy ? (
                <>
                  <i className="fa fa-spinner fa-spin" />
                  &nbsp;
                </>
              ) : null}
              {this.props.actionLabel || T`Save`}
            </button>
          ) : undefined,
          <button key="cancel" type="button" onClick={this.props.onCancel} className="btn btn-secondary">
            {this.props.cancelLabel || (this.props.onAction ? T`Cancel` : T`Close`)}
          </button>
        ]}
      >
        {this.props.children}
      </ModalPopupComponent>
    )
  }
}