import { Outlet, Link, useHref, NavLink } from 'react-router-dom'
import { useRef, useEffect, useState } from 'react'
import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Dropdown, Space, Typography, Result, App as AntApp } from 'antd'
import { DownOutlined } from "@ant-design/icons";
import '@/assets/App.css'
import AppLogo from '@/assets/logo-gh.png'
import { useThemeContext } from '@/stores/ThemeContext'
import { isEmpty } from '@/utils/commons'

const { Header, Footer, Content } = Layout
const { Title } = Typography

function Standlone() {

  const {colorPrimary, borderRadius} = useThemeContext()

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

  function renderLayout() {
    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='/'>
                <img src={AppLogo} className='logo' alt='App logo' />
              </NavLink>
              <Title level={3}>
              聊天式销售平台
              </Title>
            </Col>
          </Row>
        </Header>
        <Layout>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
            }}>
            <Outlet />
          </Content>
        </Layout>
        <Footer>桂林海纳国际旅行社有限公司</Footer>
      </Layout>
    )
  }

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: colorPrimary,
          borderRadius: borderRadius
        },
        algorithm: theme.defaultAlgorithm,
      }}
      renderEmpty={() => <Empty description={false} />}
    >
      <AntApp>
        {renderLayout()}
      </AntApp>
    </ConfigProvider>
  )
}

export default Standlone