import React from 'react'
import { Button } from 'antd'

import './MultistageFormControls.scss'

/**
 * The properties of the multistage form's paging controls
 *
 * @member {React.MouseEventHandler} handleNext An event handler fired on paging to the next form stage
 * @member {React.MouseEventHandler} handlePrev An event handler fired on paging to the previous form stage
 * @member {number} stage The current form stage
 * @member {number} stageCount The total number of stages in the form
 */
export interface MultistageFormControlsProps {
  handlePrev: React.MouseEventHandler<HTMLButtonElement>
  handleNext: React.MouseEventHandler<HTMLButtonElement>
  loading: boolean
  stage: number
  stageCount: number
}

/**
 * The controls component for a multistage form
 *
 * @param {React.MouseEventHandler} handleNext An event handler fired on paging to the next form stage
 * @param {React.MouseEventHandler} handlePrev An event handler fired on paging to the previous form stage
 * @returns {React.ReactElement} The controls element for a multistage form
 */
export const MultistageFormControls: React.FC<MultistageFormControlsProps> = ({
  handlePrev,
  handleNext,
  loading,
  stage,
  stageCount
}) => {
  return (
    <div className="multistage-form--controls">
      <Button
        onClick={handlePrev}
        disabled={loading}
        className="ant-btn-xl ant-btn-uppercase"
      >
        {stage === 1 ? 'Cancel' : 'Previous'}
      </Button>
      <Button
        onClick={handleNext}
        disabled={loading}
        loading={loading}
        className="ant-btn-xl ant-btn-uppercase"
        size="large"
        type="primary"
        htmlType="button"
      >
        {stage === stageCount ? 'Done' : 'Next'}
      </Button>
    </div>
  )
}
