import { useContext } 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 KeyboardShortcut from './KeyboardShortcut.jsx'
import PropTypes from 'prop-types'
import { AuthContext } from '../context/AuthContext'
import { useActions } from '../context/ActionsContext'
import { getModelByName } from '../../../database/ObjectModels'
import { hasActionPermission } from '../../../database/permissions'

const EditButtons = ({
  isEditing,
  handleUpdate,
  cancelEditing,
  startEditing,
  formValid,
  disabled,
  loading,
  type,
  requirePermission = true
}) => {
  const { userProfile } = useContext(AuthContext)
  const { currentObjectType } = useActions()
  const modelType = type || currentObjectType
  const model = modelType ? getModelByName(modelType) : null
  const denied =
    requirePermission && model
      ? !hasActionPermission(userProfile, model, 'edit')
      : false
  const editDisabled = disabled || denied

  return isEditing ? (
    <Space size='small'>
      <KeyboardShortcut
        shortcut='alt+s'
        hint='ALT S'
        onTrigger={() => {
          if (!editDisabled && !loading && formValid) {
            handleUpdate()
          }
        }}
      >
        <Button
          icon={<CheckIcon />}
          type='primary'
          onClick={handleUpdate}
          loading={loading}
          disabled={loading || !formValid || editDisabled}
        />
      </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 (!editDisabled && !loading) {
          startEditing()
        }
      }}
    >
      <Button
        icon={<EditIcon />}
        onClick={startEditing}
        loading={loading}
        disabled={editDisabled || 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,
  type: PropTypes.string,
  requirePermission: PropTypes.bool
}

export default EditButtons