import PropTypes from 'prop-types'
import { Button, Divider, Flex } from 'antd'
import GridIcon from '../../Icons/GridIcon'
import ListIcon from '../../Icons/ListIcon'

const ObjectTableViewButton = ({
  viewMode,
  setViewMode,
  showEndingDivider = false,
  ...buttonProps
}) => {
  const content = (
    <Button
      icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
      onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
      title={
        viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'
      }
      {...buttonProps}
    />
  )
  if (showEndingDivider) {
    return (
      <Flex gap='small' align='center'>
        <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
        {content}
      </Flex>
    )
  }
  return content
}

ObjectTableViewButton.propTypes = {
  viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
  setViewMode: PropTypes.func.isRequired,
  showEndingDivider: PropTypes.bool
}

export default ObjectTableViewButton