import React, { useEffect, useState } from 'react'

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

interface ISecondMenuProps {
  list: { key: string | number; name: string; label?: string }[]
  defalutKey: string | number
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  className?: string
  onChange: (key: string | number) => void
}

/**
 * 二级菜单组件
 */
const SecondMenu: React.FC<ISecondMenuProps> = props => {
  const { list, defalutKey, className, onChange } = props
  const [secActiveKey, setSecActiveKey] = useState<string | number>(defalutKey)
  useEffect(() => {
    setSecActiveKey(defalutKey)
  }, [defalutKey])

  const handleChangeSecondMenu = (key: string | number) => {
    setSecActiveKey(key)
    onChange(key)
  }

  return (
    <div className={`${styles['second-menu']} ${className ? className : ''}`}>
      {list.map(item => (
        <div
          key={item.key}
          className={`second-menu-item ${secActiveKey === item.key ? 'active' : ''}`}
          onClick={handleChangeSecondMenu.bind(this, item.key)}
        >
          <span className="span-content">
            {item.name}
            {item.label && <span className="span-label">{item.label}</span>}
          </span>
        </div>
      ))}
    </div>
  )
}

export default SecondMenu
