import { Outlet, Link, useHref, useLocation, NavLink } from "react-router-dom";
import { useEffect } from "react";
import { observer } from "mobx-react";
import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, Alert, App as AntApp } from "antd";
import { DownOutlined } from "@ant-design/icons";
import "antd/dist/reset.css";
import AppLogo from "@/assets/logo-gh.png";
import { useStore } from "@/stores/StoreContext.js";

const { Header, Content, Footer } = Layout;
const items = [
	{
		label: <Link to="/account/change-password">Change password</Link>,
		key: "0",
	},
	{
		label: <Link to="/account/profile">Profile</Link>,
		key: "1",
	},
	{
		type: "divider",
	},
	{
		label: <Link to="/login">Logout</Link>,
		key: "3",
	},
];
function App() {
	const { authStore } = useStore();

	const href = useHref();

	let location = useLocation();
	useEffect(() => {
		// Check location
		console.info("location.pathname: " + location.pathname);
		console.info(location.pathname.split("/"));
	}, [location]);

	const splitPath = location.pathname.split("/");
	let defaultPath = "reservation";

	if (splitPath.length > 1) {
		defaultPath = splitPath[1];
	}

	const {
		token: { colorBgContainer },
	} = theme.useToken();

	return (
		<ConfigProvider
			theme={{
				token: {
					colorPrimary: "#00b96b",
				},
				algorithm: theme.defaultAlgorithm,
			}}>
			<AntApp>
				<Layout
					style={{
						minHeight: "100vh",
					}}>
					<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
						<Row gutter={{ md: 24 }} justify="end">
							<Col span={20}>
								<NavLink to="/">
									<img src={AppLogo} className="logo" alt="App logo" />
								</NavLink>
								<Menu
									theme="dark"
									mode="horizontal"
									selectedKeys={[defaultPath]}
									items={[
										{ key: "reservation", label: <Link to="/reservation/newest">Reservation</Link> },
										{ key: "feedback", label: <Link to="/feedback">Feedback</Link> },
										{ key: "invoice", label: <Link to="/invoice">Invoice</Link> },
										{ key: "notice", label: <Link to="/notice">Notice</Link> },
									]}
								/>
							</Col>
							<Col span={4}>
								<Dropdown
									menu={{
										items,
									}}>
									<a onClick={e => e.preventDefault()}>
										<Space>
											{authStore.login.username}
											<DownOutlined />
										</Space>
									</a>
								</Dropdown>
							</Col>
						</Row>
					</Header>

					<Alert message={<NavLink to="/notice">公告 查看后不再显示，或者一直显示，或者放到页面底部</NavLink>} description="" type="info" banner closable />

					<Content
						style={{
							padding: 24,
							margin: 0,
							minHeight: 280,
							background: colorBgContainer,
						}}>
						<Outlet />
					</Content>
					<Footer></Footer>
				</Layout>
			</AntApp>
		</ConfigProvider>
	);
}

export default observer(App);