import { AGENT_LIST } from '@/common/constans/international'
import styles from './style.module.css'
import AppContext from '../../../hooks/createContext'
import { useContext, useEffect, useState } from 'react'
import AgentItem from './AgentItem'
import { IS_CN, IS_LOCAL } from '@/common/constans/international'

export interface GroupItem {
    key: string
    icon: string
    beta?: boolean
    bottom?: boolean
    floatIcon?: string
    needDot?: boolean
}

const Agent = () => {
    const {
        userInfos: [userInfos],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    const [list, setList] = useState<GroupItem[]>(AGENT_LIST)

    useEffect(() => {
        if (userInfos?.uid) {
            // 本地版本不包含以下group
            if (IS_LOCAL) return
            const arr = [] as GroupItem[]
            if (userInfos?.accessoryAccess) {
                arr.push({
                    key: 'accessory',
                    icon: '/jewelry.png',
                    beta: true,
                })
            }
            const updatedList = [...AGENT_LIST, ...arr]
            setList(updatedList)
        }
    }, [userInfos])

    const tabTop = list.filter((it) => !it.bottom)
    const tabBottom = list.filter((it) => it.bottom)

    return (
        <div className={styles.tabsContent}>
            {IS_LOCAL ? null : (
                <div className={styles.tabsTop}>
                    {tabTop.map((item, index) => {
                        return <AgentItem item={item} key={index}></AgentItem>
                    })}
                </div>
            )}

            {tabBottom.length && (!IS_CN || userInfos?.isPlanPaidUser || IS_LOCAL) ? (
                <div className={styles.tabBottom}>
                    {IS_LOCAL ? null : <div className={styles.bottomDivider}></div>}
                    {tabBottom.map((item, index) => {
                        return <AgentItem item={item} key={index}></AgentItem>
                    })}
                </div>
            ) : null}
        </div>
    )
}

export default Agent
