import I18N from '../I18N'
import React, { useState, useEffect } from 'react'
import { Tag, Tooltip } from 'tntd'
import { find, filter, isNil } from 'lodash'
import './index.less'

function reBytesStr(str, len = 10) {
  if (!str && isNil(str)) {
    return ''
  }
  let num = 0
  let str1 = `${str}`
  let newStr = ''
  for (let i = 0, lens = str1.length; i < lens; i++) {
    num += str1.charCodeAt(i) > 255 ? 2 : 1
    if (num > len) {
      break
    } else {
      newStr = str1.substring(0, i + 1)
    }
  }
  return newStr !== str1 ? `${newStr}...` : newStr
}

export default function SelectedBox({
  disabled,
  selected,
  onChange,
  userList,
  userMap,
  disableRole,
  roleList,
  roleMap,
  help,
  service,
}) {
  const [userCount, setUserCount] = useState(0)

  useEffect(() => {
    if (disableRole) {
      setUserCount(selected.length)
      return
    }
    if (service.countUsers && roleList.length > 0) {
      if (selected.length > 0 && !!find(selected, (s) => roleMap[s])) {
        service
          .countUsers({
            usernames: filter(selected, (s) => !roleMap[s]),
            roleUuids: filter(selected, (s) => roleMap[s]),
          })
          .then((res) => setUserCount(res))
      } else {
        setUserCount(selected.length)
      }
    }
  }, [selected, roleMap, roleList, disableRole])

  return (
    <>
      <div className="assign-user-right-top">
        {I18N.base.index.yiXuanZe}
        {service.countUsers && (
          <span className="ml10">
            ({userCount}
            <span className="c-8b919e">/{userList.length}</span>)
          </span>
        )}
        {help}
      </div>
      <div className="assign-user-right-con">
        {selected.map((it) => {
          const username = userMap[it]
          if (username) {
            const sliceText = reBytesStr(username, 16)
            const dom = (
              <Tag
                key={it}
                closable={!disabled}
                disabled={disabled}
                // color="blue"
                onClose={() => onChange(filter(selected, (s) => s !== it))}
              >
                {sliceText}
              </Tag>
            )
            return username === sliceText ? (
              dom
            ) : (
              <Tooltip title={username} key={it}>
                {dom}
              </Tooltip>
            )
          }
          const findRole = find(roleList, (u) => u.value === it)
          if (findRole) {
            const allText = findRole.label
            const sliceText = reBytesStr(findRole.label, 12)
            const dom = (
              <Tag
                key={it}
                closable
                disabled={disabled}
                // color="cyan"
                onClose={() => onChange(filter(selected, (s) => s !== it))}
              >
                {sliceText}
              </Tag>
            )
            return allText === sliceText ? (
              dom
            ) : (
              <Tooltip title={allText} key={it}>
                {dom}
              </Tooltip>
            )
          }
        })}
      </div>
    </>
  )
}