import React from 'react'
import { filter } from 'lodash'
import { Checkbox, Empty } from 'tntd'
import './index.less'

export default function CheckboxList({
  disabled,
  dataSource,
  selected,
  onChange,
  showEmpty = true,
  emptyText,
  children,
}) {
  if (dataSource && dataSource.length > 0) {
    return (
      <div className="assign-user-checkbox">
        {children}
        {dataSource.map(({ label, value }) => (
          <Checkbox
            disabled={disabled}
            key={value}
            checked={selected.includes(value)}
            onChange={(e) => {
              if (e.target.checked) {
                onChange([...selected, value])
              } else {
                onChange(filter(selected, (s) => s !== value))
              }
            }}
          >
            {label}
          </Checkbox>
        ))}
      </div>
    )
  } else if (showEmpty) {
    return (
      <div className="assign-user-checkbox">
        <Empty size="small" description={emptyText} />
      </div>
    )
  }
  return null
}