import {Outlet, useLocation, useNavigate, useSearchParams} from "react-router-dom";
import {Button, Divider, Dropdown, MenuProps} from "antd";
import React, {useEffect} from "react";

import AuthGuard from "@/routes/layout/auth-guard.tsx";
import {LogoText} from "@/components/icons/logo.tsx";

import {UserAvatar} from "@/components/icons/user-avatar.tsx";
import {DashboardNavigation} from "@/routes/layout/dashboard-navigation.tsx";

import useAuth from "@/hooks/useAuth.ts";
import {hidePhone} from "@/util/strings.ts";
import {defaultCache} from "@/hooks/useCache.ts";
import {IconVideo} from "@/components/icons";
import {useTranslation} from "react-i18next";
import useConfig from "@/hooks/useConfig.ts";


type LayoutProps = {
	children: React.ReactNode
}

const NavigationUserContainer = () => {
	const {t } = useTranslation()
	const {logout, user} = useAuth()
	const navigate = useNavigate()
	const handleLogout = ()=>{
		logout().then(() => navigate('/user'))
	}
	const items: MenuProps['items'] = [
		{
			key: 'profile',
			label: <div className="nav-item" onClick={() => navigate('/history')}>
				<IconVideo />
				<span className={"nav-text"}>{t('history.text')}</span>
			</div>,
		},
		// {
		// 	key: 'logout',
		// 	label: <div onClick={handleLogout}>退出</div>,
		// },
	];
	const UserButton = () => (<div
		className={`flex items-center rounded-3xl ${user ? 'bg-[#e3eeff]' : 'bg-primary-blue'} p-1 pr-2 cursor-pointer rounded`}>
		<UserAvatar className="user-avatar size-7"/>
		{user ? <span className={"username ml-2 text-sm"}>{hidePhone(user.nickname)}</span> : (
			<span className="text-sm mx-2 text-white">{t('login.title')}</span>
		)}
	</div>)
	return (<div className={"flex items-center justify-between gap-2 ml-10"}>
		{user ? <Dropdown
			rootClassName={'z-[999999] userinfo-drop-menu'}
			menu={{items}} placement="bottomRight"
			dropdownRender={(menu)=>(
				<div>
					<div className="user-profile flex gap-4">
						<div className="avatar"><UserAvatar className="user-avatar"/></div>
						<div className="info">
							<div>{user?.nickname}</div>
							<div>ID: {user?.id}</div>
						</div>
					</div>
					<Divider style={{ margin: 0 }} />
					<div className="menu-list-container">
						{menu}
					</div>
					<Divider style={{ margin: 0 }} />
					<div className="logout">
						<div onClick={handleLogout}>{t('user.logout')}</div>
					</div>
				</div>

			)}
		>
			<div><UserButton/></div>
		</Dropdown> : <UserButton/>}
	</div>)
}
export const BaseLayout: React.FC<LayoutProps> = ({children}) => {
	const {i18n,onChangeLocalization} = useConfig();
	const [params] = useSearchParams();
	return (<div className={'dashboard-layout min-h-screen'}>
		<div className="min-h-screen w-full">
			<div className="app-header">
				<div className="logo-container">
					<LogoText style={{fontSize: 30}}/>
				</div>
				<DashboardNavigation/>
				<div className="flex items-center">
					{params.get('lang') || AppConfig.APP_LANG == 'multiple' && <div>
					{
						i18n == 'zh-CN'?(
							<Button className="ml-2" onClick={()=>onChangeLocalization('en-US')}>Change To EN</Button>
						):(
							<Button className="ml-2" onClick={()=>onChangeLocalization('zh-CN')}>显示中文</Button>
						)
					}
					</div>}
					<NavigationUserContainer/>
				</div>
			</div>
			<div className="app-content flex-1 box-sizing">
				<div className="content-container">
					{children}
				</div>
			</div>
		</div>
	</div>)
}


const DashboardLayout: React.FC<{ children?: React.ReactNode }> = ({children}) => {
	const loc = useLocation()
	const navigate = useNavigate()
	useEffect(()=>{
		if(!defaultCache.firstLoadPath && loc.pathname == '/live'){
			defaultCache.firstLoadPath = loc.pathname;
			navigate('/')
		}
	},[])
	return <AuthGuard>
		<div className="fixed">{defaultCache.firstLoadPath}</div>
		<BaseLayout>
			{children ? children : <Outlet/>}
		</BaseLayout>
	</AuthGuard>
}
export default DashboardLayout