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, Select, App as AntApp } from 'antd'
import { DownOutlined } from "@ant-design/icons";
import ErrorBoundary from '@/components/ErrorBoundary';
import zhLocale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

import 'react-chat-elements/dist/main.css'
import '@/assets/App.css'
import AppLogo from '@/assets/logo-gh.png'
import { isEmpty } from '@/utils/commons'

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

function App() {

  const href = useHref()
  //const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
  let defaultPath = 'follow'

  if (href !== '/') {
    const splitPath = href.split('/')
    defaultPath = href
  }
  const {
    token: { colorBgContainer },
  } = theme.useToken()

  function globalEmpty() {
    return (
      <Empty description={false} />
    )
  }

  function renderLogin() {
    return (
      <Result
        status='403'
        title='授权失败'
        subTitle='请登陆信息平台，通过指定链接打开。'
      />
    )
  }

  function renderLayout() {
    return (
      <Layout>
        <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 2, width: '100%', background: 'white' }}>
          <Row gutter={{ md: 24 }} align='middle'>
            <Col flex="300px">
              <NavLink to='/'>
                <img src={AppLogo} className='logo' alt='App logo' />
              </NavLink>
              <Title level={3}>
                聊天式销售平台
              </Title>
            </Col>
            <Col span={10}>
              <Menu
                mode='horizontal'
                selectedKeys={[defaultPath]}
                items={[
                  { key: '/s/order/follow', label: <Link to='/s/order/follow'>订单跟踪</Link> },
                  { key: '/s/order/chat', label: <Link to='/s/order/chat'>销售聊天</Link> },
                  { key: '/s/chat/history', label: <Link to='/s/chat/history'>聊天历史</Link> },
                  { key: '/s/sales/management', label: <Link to='/s/sales/management'>销售管理</Link> }
                ]}
              />
            </Col>
            <Col flex="auto" style={{ color: "white", marginBottom: "0", display: "flex", justifyContent: "end" }}>
              <Dropdown
                menu={{
                  items: [
                    {
                      label: <Link to="/s/account/profile">个人资料</Link>,
                      key: "1",
                    },
                    {
                      type: "divider",
                    },
                    {
                      label: <Link to="/login?out">退出</Link>,
                      key: "3",
                    },
                  ]
                }}
                trigger={['click']}
              >
                <a onClick={(e) => e.preventDefault()}>
                  <Space>
                    廖一军
                    <DownOutlined />
                  </Space>
                </a>
              </Dropdown>

            </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: '#1ba784',
          borderRadius: 4
        },
        algorithm: theme.defaultAlgorithm,
      }}
      locale={zhLocale}
      renderEmpty={globalEmpty}
    >
      <AntApp>
      <ErrorBoundary>
        {renderLayout()}
      </ErrorBoundary>
      </AntApp>
    </ConfigProvider>
  )
}

export default App