import I18N from '../I18N'
import React from 'react'
import {  Checkbox, Button } from 'tntd'
import { filter, find, uniq } from 'lodash'
import CheckboxList from '../CheckboxList'

import './index.less'

export default function SelectByRole({
  disabled,
  selected,
  onChange,
  onClose,
  dataSource,
}) {
  return (
    <>
      <div className="assign-user-left-title">
        <Button type="link" icon="left" onClick={onClose}>
          {I18N.base.index.back}
        </Button>
        {I18N.base.index.anJueSe}
      </div>
      <div className="assign-user-left-content assign-user-by-role">
        <CheckboxList
          disabled={disabled}
          dataSource={dataSource}
          selected={selected}
          onChange={onChange}
        >
          {/* {dataSource.length > 0 && (
            <Checkbox
              disabled={disabled}
              checked={
                dataSource.length > 0 &&
                !find(dataSource, (s) => !selected.includes(s.value))
              }
              onChange={(e) => {
                if (e.target.checked) {
                  onChange(
                    uniq([
                      ...selected,
                      ...dataSource.map((s) => s.value),
                    ])
                  )
                } else {
                  onChange(
                    filter(
                      selected,
                      (s) => !find(dataSource, (sr) => sr.value === s)
                    )
                  )
                }
              }}
            >
              {I18N.base.index.quanBu}
            </Checkbox>
          )} */}
        </CheckboxList>
      </div>
    </>
  )
}