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

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

interface ISecondMenuProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  list: { key: string | number; name: string; IsRed?: boolean }[] | any
  keyChange?: { key: string | number; name: string } // 用于转换Key
  defaultKey?: string | number
  className?: string
  onChange: (key: string | number) => void
}

/**
 * Tabs菜单组件
 */
const TabsMenu: React.FC<ISecondMenuProps> = props => {
  const { list, keyChange, defaultKey, className, onChange } = props
  const [secActiveKey, setSecActiveKey] = useState<string | number>()
  const [newList, setNewList] = useState(list)

  useEffect(() => {
    let _list = list
    if (keyChange) {
      _list = list?.map((item: { [x: string]: string | number }) => {
        return {
          key: item[keyChange.key],
          name: item[keyChange.name],
          IsRed: item?.IsRed || false
        }
      })
    }
    setSecActiveKey(defaultKey)
    setNewList(_list)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [keyChange, list, defaultKey])

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

  return (
    <div className={`${styles['tabs-menu']} ${className}`}>
      {newList?.map((item: { key: string | number; name: string; IsRed?: boolean }) => (
        <div
          key={item.key}
          className={`tabs-menu-item ${secActiveKey === item.key ? 'active' : ''}`}
          onClick={handleChangeTabsMenu.bind(this, item.key)}
        >
          {item?.IsRed && <span className="red-point m-r-xs" />}
          <span className="span-content">{item.name}</span>
        </div>
      ))}
    </div>
  )
}

export default TabsMenu
