import PropTypes from '../_util/vue-types'
import { getOptionProps } from '../_util/props-util'
import Button from '../button'

function noop () {
}

export const TransferOperationProps = {
  className: PropTypes.string,
  leftArrowText: PropTypes.string,
  rightArrowText: PropTypes.string,
  moveToLeft: PropTypes.any,
  moveToRight: PropTypes.any,
  leftActive: PropTypes.bool,
  rightActive: PropTypes.bool,
  disabled: PropTypes.bool,
}

export default {
  name: 'Operation',
  props: { ...TransferOperationProps },
  render () {
    const {
      disabled,
      moveToLeft = noop,
      moveToRight = noop,
      leftArrowText = '',
      rightArrowText = '',
      leftActive,
      rightActive,
    } = getOptionProps(this)
    return (
      <div>
        <Button
          type='primary'
          size='small'
          disabled={disabled || !rightActive}
          onClick={moveToRight}
          icon='right'
        >
          {rightArrowText}
        </Button>
        <Button
          type='primary'
          size='small'
          disabled={disabled || !leftActive}
          onClick={moveToLeft}
          icon='left'
        >
          {leftArrowText}
        </Button>
      </div>
    )
  },
}