import PropTypes from 'prop-types'
import { Divider, Flex } from 'antd'
import EditButtons from './EditButtons'
import { useObjectListView } from '../context/ObjectListViewContext'

const ListViewEditButtons = ({ showStartingDivider = false }) => {
  const {
    isEditing,
    initialLoading,
    saving,
    saveEdits,
    cancelEdits,
    startEditing
  } = useObjectListView()

  return (
    <Flex align='center' gap='small'>
      {showStartingDivider && (
        <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
      )}
      <EditButtons
        isEditing={isEditing}
        handleUpdate={async () => {
          await saveEdits()
        }}
        cancelEditing={cancelEdits}
        startEditing={startEditing}
        formValid={true}
        disabled={initialLoading}
        loading={saving}
        requirePermission={false}
      />
    </Flex>
  )
}

ListViewEditButtons.propTypes = {
  showStartingDivider: PropTypes.bool
}

export default ListViewEditButtons