/*
  单个选择器组件
  value - key
  multi - 多选
  onSelect - 执行父组件的选择事件
  selected - 是否选中状态
  children - label
*/
import React, {ReactNode} from 'react'
import useClassNames from '../../shared/useClassNames'
import Icon from '../icon/index'
import './index.less'

export type SelectorProps = {
  value: number
  multi?: boolean
  className?: string
  disabled?: boolean
  selected?: boolean
  children: ReactNode
  type?: 'department' | 'userName'
  onSelect?(selected: boolean, value: number, type?: 'department' | 'userName'): void
}

const Selector: React.FC<SelectorProps> = ({
  multi,
  className,
  children,
  disabled,
  selected,
  value,
  type,
  onSelect,
}: SelectorProps) => {
  const handleSelect = () => {
    if (disabled) return
    onSelect?.(!selected, value, type)
  }
  const selectorClassName = useClassNames('selector', '', {disabled: Boolean(disabled)}, className)
  const radioClassName = useClassNames('radio', '', {
    selected: Boolean(selected),
    multi: Boolean(multi),
  })
  return (
    <div className={selectorClassName}>
      <div className={radioClassName} onClick={handleSelect}>
        {selected &&
          (multi ? (
            <div className="radio-multi">
              <Icon className="radio-multi-icon" name="right-white" />
            </div>
          ) : (
            <div className="radio-single" />
          ))}
      </div>
      <div className="label">{children}</div>
    </div>
  )
}

export default Selector