import React, { ReactElement } from 'react'
import useRequest from '@ahooksjs/use-request'

import styles from '../css/useChartsTag.module.scss'
import { IPermissionListItem, MaterialService } from '../Material.service'
import TabMenu from 'Newest/components/TabMenu'

/**
 * 纪要库三级菜单
 */
const useArticleTag = (): {
  industryId: number | undefined
  flagID: number | undefined
  ArticleTagSelect: ReactElement | null
} => {
  const [industryId, setIndustryId] = React.useState<number>()
  const [flagID, setFlagID] = React.useState<number>() // 标记买方研选的ID

  const { data } = useRequest(MaterialService.getPermissionList, {
    formatResult: response => response.data.Data.List,
    onSuccess: res => {
      setIndustryId(res[0].ChartPermissionId)
      const findItem = res.find((item: IPermissionListItem) => item.PermissionName.includes('买方研选'))
      setFlagID(findItem?.ChartPermissionId)
    }
  })

  const handlePtagChange = (value: string | number) => {
    setIndustryId(value as number)
  }

  const ArticleTagSelect = data ? (
    <TabMenu
      list={data}
      keyChange={{ key: 'ChartPermissionId', name: 'PermissionName' }}
      actKey={industryId}
      onChange={handlePtagChange}
      className={styles['third-wrapper']}
    />
  ) : null

  return { industryId, flagID, ArticleTagSelect }
}

export default useArticleTag
