import PropTypes from 'prop-types'
import { theme } from 'antd'
import CheckIcon from '../../Icons/CheckIcon'
import XMarkIcon from '../../Icons/XMarkIcon'

const ICON_STYLE = {
  fontSize: 7,
  color: '#ffffff'
}

const PermissionCheckbox = ({
  checked = false,
  indeterminate = false,
  mixed = false,
  disabled = false,
  onChange
}) => {
  const { token } = theme.useToken()
  const state = mixed
    ? 'mixed'
    : indeterminate
      ? 'inherit'
      : checked
        ? 'allow'
        : 'deny'

  return (
    <button
      type='button'
      className='permission-checkbox'
      data-state={state}
      disabled={disabled}
      aria-checked={mixed || indeterminate ? 'mixed' : checked}
      role='checkbox'
      onClick={(event) => {
        if (disabled || typeof onChange !== 'function') return
        onChange(event)
      }}
    >
      <span
        className='permission-checkbox-face permission-checkbox-inherit'
        style={{ borderColor: token.colorBorder }}
      />
      <span
        className='permission-checkbox-face permission-checkbox-allow'
        style={{ backgroundColor: token.colorSuccess }}
      >
        <CheckIcon style={ICON_STYLE} />
      </span>
      <span
        className='permission-checkbox-face permission-checkbox-deny'
        style={{ backgroundColor: token.colorError }}
      >
        <XMarkIcon style={ICON_STYLE} />
      </span>
      <span
        className='permission-checkbox-face permission-checkbox-mixed'
        style={{ backgroundColor: token.colorPrimary }}
      >
        <span className='permission-checkbox-square' />
      </span>
    </button>
  )
}

PermissionCheckbox.propTypes = {
  checked: PropTypes.bool,
  indeterminate: PropTypes.bool,
  mixed: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
}

export default PermissionCheckbox