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

const EditButtons = ({
  isEditing,
  handleUpdate,
  cancelEditing,
  startEditing,
  formValid,
  disabled,
  loading
}) => {
  return isEditing ? (
    <Space size='small'>
      <KeyboardShortcut
        shortcut='alt+s'
        hint='ALT S'
        onTrigger={() => {
          if (!disabled && !loading && formValid) {
            handleUpdate()
          }
        }}
      >
        <Button
          icon={<CheckIcon />}
          type='primary'
          onClick={handleUpdate}
          loading={loading}
          disabled={loading || !formValid || disabled}
        />
      </KeyboardShortcut>
      <KeyboardShortcut
        shortcut='alt+c'
        hint='ALT C'
        onTrigger={() => {
          if (!disabled && !loading) {
            cancelEditing()
          }
        }}
      >
        <Button
          icon={<XMarkIcon />}
          onClick={cancelEditing}
          disabled={loading || disabled}
        />
      </KeyboardShortcut>
    </Space>
  ) : (
    <KeyboardShortcut
      shortcut='alt+e'
      hint='ALT E'
      onTrigger={() => {
        if (!disabled && !loading) {
          startEditing()
        }
      }}
    >
      <Button
        icon={<EditIcon />}
        onClick={startEditing}
        loading={loading}
        disabled={disabled || loading}
      />
    </KeyboardShortcut>
  )
}

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
