import React from 'react'
import { Button, Space } from 'antd'
import CheckIcon from '../../Icons/CheckIcon.jsx'
import XMarkIcon from '../../Icons/XMarkIcon.jsx'
import EditIcon from '../../Icons/EditIcon.jsx'
import PropTypes from 'prop-types'

const EditButtons = ({
  isEditing,
  handleUpdate,
  cancelEditing,
  startEditing,
  formValid,
  disabled,
  loading
}) => {
  return isEditing ? (
    <Space size='small'>
      <Button
        icon={<CheckIcon />}
        type='primary'
        onClick={handleUpdate}
        loading={loading}
        disabled={loading || !formValid || disabled}
      />
      <Button
        icon={<XMarkIcon />}
        onClick={cancelEditing}
        disabled={loading || disabled}
      />
    </Space>
  ) : (
    <Button
      icon={<EditIcon />}
      onClick={startEditing}
      loading={loading}
      disabled={disabled || loading}
    />
  )
}

EditButtons.propTypes = {
  isEditing: PropTypes.bool.isRequired,
  handleUpdate: PropTypes.func.isRequired,
  cancelEditing: PropTypes.func.isRequired,
  startEditing: PropTypes.func.isRequired,
  formValid: PropTypes.bool.isRequired,
  disabled: PropTypes.any,
  loading: PropTypes.bool.isRequired
}

export default EditButtons