import { Link, NavLink, useNavigate } from "react-router-dom";
import { memo, useEffect, useMemo } from "react";
import { SearchBar } from "./SearchBar";
import Navigation from "./navigation";
import { useAuth } from "@web/src/providers/auth-provider";
import { HomeOutlined, UserOutlined } from "@ant-design/icons";
import { UserMenu } from "../element/usermenu/usermenu";
import logo from "@web/src/assets/logo.png";
import { env } from "@web/src/env";
import { Button } from "antd";
import usePublicImage from "@web/src/hooks/usePublicImage";
import { useUserAgent } from "@web/src/hooks/useUserAgent";
export const Header = memo(function Header() {
	const { isAuthenticated } = useAuth();
	const navigate = useNavigate();
	const { imageUrl } = usePublicImage("logo.png");

	const { previewMode } = useUserAgent();
	return (
		<header className="sticky top-0 z-50 shadow-lg bg-slate-50">
			<div className="mx-auto px-4">
				<div className="py-1  relative">
					{" "}
					{/* 添加relative定位上下文 */}
					<div className="flex items-center justify-between gap-4">
						{/* 左侧logo部分 */}
						<div
							onClick={() => {
								window.location.href = env.HOME_URL;
							}}
							className="hover:cursor-pointer flex items-center flex-shrink-0">
							{" "}
							{/* 防止压缩 */}
							<div className="text-xl flex justify-center items-center font-bold text-primary-500/80 whitespace-nowrap">
								{/* {env.APP_NAME} */}
								<HomeOutlined className="mr-2" />
								<span>{env.HOME_TEXT} </span>
							</div>
						</div>
						{/* <SearchBar /> */}
						{/* 中间标题部分 */}
						{/* <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"></div> */}
						{/* 右侧登录部分 */}
						<div className="flex items-center flex-shrink-0">
							{" "}
							{/* 防止压缩 */}
							{!isAuthenticated
								? !previewMode && (
										<Button
											className="  text-lg bg-primary-500/80 "
											style={{
												boxShadow: "none",
											}}
											onClick={() => {
												navigate("/auth");
											}}
											type="primary"
											icon={
												<UserOutlined></UserOutlined>
											}>
											登录
										</Button>
									)
								: !previewMode && <UserMenu />}
							{previewMode && (
								<Button
									className="  text-lg bg-primary-500/80 "
									style={{
										boxShadow: "none",
									}}
									type="primary">
									预览模式
								</Button>
							)}
						</div>

						{/* 独立定位的搜索栏 */}
						{/* <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl px-4">
							
						</div> */}
					</div>
				</div>
				{/* <Navigation /> */}
			</div>
		</header>
	);
});