import React from 'react'

import styles from '../css/CheckboxMenu.module.scss'

interface ICheckboxMenuProps {
  menuOption: { value: number | string; label: string }[]
  actKey?: (string | number)[]
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  className?: any
  type?: 'checkbox' | 'primary'
  onChange?: (key: (string | number)[]) => void
}

/**
 * CheckBox菜单组件
 */
const CheckboxMenu: React.FC<ICheckboxMenuProps> = props => {
  const { menuOption, actKey = [], className, type = 'checkbox', onChange } = props

  const handleChangeCheckboxMenu = (item: { value: number | string; label: string }) => {
    const findItem = actKey.find(key => key === item.value)
    const newKey = !findItem ? [...actKey, item.value] : actKey.filter(key => key !== item.value)
    onChange && onChange(newKey)
  }
  const handleCheckedFormat = (keys: (string | number)[], key: string | number) => {
    const findItem = keys.find(item => item === key)
    return !!findItem
  }

  return (
    <>
      <div className={`${styles['checkboxmenu-wrapper']} ${className ? className : ''}`}>
        {type === 'checkbox' &&
          menuOption?.map(item => (
            <div className={`menu-item `} key={item.value} onClick={handleChangeCheckboxMenu.bind(this, item)}>
              <input
                type="checkbox"
                className="checkbox-item"
                checked={handleCheckedFormat(actKey, item.value)}
                readOnly
              />
              <label htmlFor="#checkbox-item" className="checkbox-label">
                {item.label}
              </label>
            </div>
          ))}
        {type === 'primary' &&
          menuOption.map((item, index) => (
            <div
              className={`${styles['activity-btn']} ${
                handleCheckedFormat(actKey, item.value) ? styles['activitied-btn'] : ''
              } m-r-md`}
              key={item.value}
              onClick={handleChangeCheckboxMenu.bind(this, item)}
            >
              {item.label}
            </div>
          ))}
      </div>
    </>
  )
}

export default CheckboxMenu
