import { Button, Popover, Checkbox, Flex } from 'antd'
import PropTypes from 'prop-types'

const ViewButton = ({
  disabled = false,
  items = [],
  visibleState = {},
  updateVisibleState = () => {},
  ...buttonProps
}) => {
  return (
    <Popover
      content={(() => {
        return (
          <Flex vertical>
            <Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
              {items.map((item) => (
                <Checkbox
                  checked={visibleState[item.key]}
                  key={item.key}
                  onChange={(e) => {
                    updateVisibleState(item.key, e.target.checked)
                  }}
                >
                  {item.label}
                </Checkbox>
              ))}
            </Flex>
          </Flex>
        )
      })()}
      placement='bottomLeft'
      arrow={false}
    >
      <Button disabled={disabled} {...buttonProps}>
        View
      </Button>
    </Popover>
  )
}

ViewButton.propTypes = {
  disabled: PropTypes.bool,
  items: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired
    })
  ),
  visibleState: PropTypes.object,
  updateVisibleState: PropTypes.func
}

export default ViewButton