import '@/assets/App.css'
import AppLogo from '@/assets/logo-gh.png'
import { useThemeContext } from '@/stores/ThemeContext'
import useAuthStore from '@/stores/AuthStore'
import { Col, Layout, Row, Typography, theme, Space, Avatar, Dropdown, } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { NavLink, Outlet,  Link } from 'react-router-dom'
const { Header, Footer, Content } = Layout
const { Title } = Typography

function MobileApp() {

  const {colorPrimary, borderRadius} = useThemeContext()
  const loginUser = useAuthStore(state => state.loginUser)

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

  return (
    <Layout>
      <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
        <Row gutter={{ md: 24 }} align='middle'>
          <Col flex="auto" style={{ color: "white", marginBottom: "0", display: "flex", justifyContent: "center" }}>
            <NavLink to='/m/conversation'>
              <img src={AppLogo} className='logo' alt='App logo' />
            </NavLink>
            <Dropdown
              menu={{
                items: [
                  {
                    label: <Link to='/p/dingding/logout'>退出</Link>,
                    key: '3',
                  },
                ]
              }}
              trigger={['click']}
            >
              <a onClick={(e) => e.preventDefault()} style={{ color: colorPrimary }}>
                <Space><Avatar
                src={loginUser.avatarUrl}>{loginUser?.username?.substring(1)}</Avatar>{loginUser.username}<DownOutlined />​</Space>
              </a>
            </Dropdown>
          </Col>
        </Row>
      </Header>
      <Layout>
        <Content
          style={{
            padding: 0,
            margin: 0,
            minHeight: 200,
            background: colorBgContainer,
          }}>
          <Outlet />
        </Content>
      </Layout>
      {/* <Footer>桂林海纳国际旅行社有限公司</Footer> */}
    </Layout>
  )
}

export default MobileApp
