import Image from 'next/image'
import styles from './style.module.css'
import React, { useContext, useState, useRef, useEffect } from 'react'
import { joinOut } from '@/pages/api/base'
import AppContext from '../hooks/createContext'
import { useTranslation } from 'next-i18next'
import { IuserInfosParams } from '@/pages/api/base/type'
import { IS_CN } from '@/common/constans/international'

interface Iprops extends IuserInfosParams {
    isMobile: boolean
}

const Logout = ({ uname, isMobile }: Iprops) => {
    const { t } = useTranslation('common')
    const {
        userInfos: [userInfos, setUserInfos],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    const [isCardVisible, setCardVisibility] = useState(false)
    const cardRef = useRef<HTMLDivElement>(null)
    const imageRef = useRef<HTMLImageElement>(null)
    // const [hoverDiv, setHoverDiv] = useState(false)

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (
                cardRef.current &&
                !cardRef.current.contains(event.target as Node) &&
                imageRef.current &&
                !imageRef.current.contains(event.target as Node)
            ) {
                openCard(false)
            }
        }

        document.addEventListener('mousedown', handleClickOutside)

        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [])

    const buttonInfos = [
        {
            key: 'mComputerPower',
            label: t('mComputerPower'),
            router: '/member',
            imgSvg: '/member-user.svg',
            imgAlt: 'member-user for logo',
            isShow: !isMobile,
            marginTop: true,
            borderBottom: false,
        },
        {
            key: 'mOrder',
            label: t('mOrder'),
            router: '/order',
            imgSvg: '/receipt-text.svg',
            imgAlt: 'receipt-text for logo',
            isShow: !isMobile,
            marginTop: false,
            borderBottom: false,
        },
        {
            key: '我的推广',
            label: '我的推广',
            router: '/union',
            imgSvg: '/empty-wallet.svg',
            imgAlt: 'mpty-wallet for logo',
            isShow: userInfos?.isAgency,
            marginTop: false,
            borderBottom: true,
        },
        {
            key: 'mReferrals',
            label: 'My Referrals',
            router: '/referral',
            imgSvg: '/ic_menu_referral.svg',
            imgAlt: 'referrals',
            isShow: !IS_CN,
            marginTop: false,
            borderBottom: true,
        },
        {
            key: '我的API',
            label: t('mApiKey'),
            router: '/apiKey',
            imgSvg: '/api.svg',
            imgAlt: 'apiKey for logo',
            isShow: IS_CN,
            marginTop: true,
            borderBottom: true,
        },
        {
            key: 'logout',
            label: t('logout'),
            router: '/logout',
            imgSvg: '/logout.svg',
            imgAlt: 'logout for logo',
            isShow: true,
            marginTop: true,
            borderBottom: false,
        },
    ]

    const openCard = (isOpen: boolean) => {
        setCardVisibility(isOpen)

        // setHoverDiv(isOpen)
    }

    const handleJump = async (path: string) => {
        if (path === '/logout') {
            await joinOut()
            setUserInfos(null)
            location.reload()
        } else {
            await window.open(path)
        }
    }

    return (
        <>
            <Image
                className={styles.avatar}
                ref={imageRef}
                src="/ic_user_default.svg"
                alt="user for logo"
                width={32}
                height={32}
                onClick={() => {
                    openCard(!isCardVisible)
                }}
                // onMouseEnter={() => openCard(true)}
                // onMouseLeave={() => openCard(false)}
            />
            {/*{hoverDiv ?(
                <div
                    className={styles.onMouseAssistDiv}
                    onMouseEnter={() => openCard(true)}
                    onMouseLeave={() => openCard(false)}
                ></div>
            ): null}*/}

            {isCardVisible && (
                <div
                    ref={cardRef}
                    className={styles.userInfoCard}
                    // onMouseEnter={() => openCard(true)}
                    // onMouseLeave={() => openCard(false)}
                >
                    <div className={styles.logoutHeader}>
                        <div className={styles.userImg}>
                            <Image
                                src="/ic_user_default.svg"
                                alt="user info for logo"
                                width={64}
                                height={64}
                            />
                        </div>
                        <div className={`${styles.userUname} ag16`}>{uname}</div>
                        <div className={`${styles.memberType} ag12`}>{userInfos?.planName}</div>
                    </div>
                    <div className={styles.logoutContent}>
                        {buttonInfos.map((item, index) => {
                            return (
                                item.isShow && (
                                    <React.Fragment key={`button_${index}`}>
                                        <div
                                            className={`${styles.clickDiv} ${styles.avatar}`}
                                            onClick={() => handleJump(item.router)}
                                            style={item?.marginTop ? { marginTop: '8px' } : {}}
                                        >
                                            <div className={styles.clickTextDiv}>
                                                <Image
                                                    className={styles.clickSvg}
                                                    src={item.imgSvg}
                                                    alt={item.imgAlt}
                                                    width={16}
                                                    height={16}
                                                />
                                                <div className={`${styles.clickTitleDiv} ag14`}>
                                                    {item.label}
                                                </div>
                                            </div>
                                        </div>
                                        {item.borderBottom && (
                                            <div className={styles.buttonDivider}></div>
                                        )}
                                    </React.Fragment>
                                )
                            )
                        })}
                    </div>
                </div>
            )}
        </>
    )
}
export default Logout
