'use client';

import {createStyles, useTheme} from 'antd-style';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';

import CloudBanner, { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
import { usePlatform } from '@/hooks/usePlatform';
import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
import { UserOutlined } from '@ant-design/icons';
import { LayoutProps } from './type';
import { Divider, Avatar } from "antd";

const title = {
  "/chat": '会话',
  "/discover/assistants": "助手",
  "/files": "工具",
  "/knowledge": "知识库",
  "/model": "模型",
  "/plugins": "插件",
  "/power": "算力",
  "/robot": "数字人",
}
const useStyles = createStyles(({ css }) => ({
  dividerCen: css`
    width: 1px;
    height: 26px;
    background-color: #d8d8d8;
    margin: 8px 16px;
  `,
  inp: css`
    width: 283px;
    margin-right: 43px;
    background: #F3F6FF;
    &:hover, &:active, &:focus {
      border-color: transparent !important;
      background: #F3F6FF !important;
    }
  `,
  ledDiv: css `
    width: 50%;
    display: inline-block;
  `,
  leftTitle: css`
    font-size: 20px;
    color: #3d3d3d;
    display: inline-block
  `,
  nameSpn: css`
    margin-right: 16px;
    margin-left: 18px;
    display: inline-block;
  `,
  serchIcon: css`
    color: #BCCEFF;
    font-size: 24px;
  `,
  topCenten: css`
    width: 100%;
    line-height: 60px;
    background: #FFFFFF;
    box-sizing: border-box;
    /* 分割线颜色 */
    border-width: 0px 0px 2px 0px;
    border-style: solid;
    border-color: rgba(187, 204, 253, 0.24);
  `,
}))

const Layout = memo<LayoutProps>(({ children, nav }) => {
  const { isPWA } = usePlatform();
  const theme = useTheme();
  const { styles, cx } = useStyles()
  console.log(window?.location?.pathname,'3837373666router--------------------------------------------')
  const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
  const pathName = window?.location?.pathname
  return (
    <>
      {showCloudPromotion && <CloudBanner />}
      <Flexbox
        height={showCloudPromotion ? `calc(100% - ${BANNER_HEIGHT}px)` : '100%'}
        horizontal
        style={{
          borderTop: isPWA ? `1px solid ${theme.colorBorder}` : undefined,
          position: 'relative',
        }}
        width={'100%'}
      >
        {nav}
        <div style={{ width: '100%' }}>
          <div className={cx(styles.topCenten)}>
            <div  className={cx(styles.ledDiv)}>
              <span className={cx(styles.leftTitle)} style={{ marginLeft: '16px' }}>集智AI</span>
              <Divider className={cx(styles.dividerCen)} type="vertical" />
              <span className={cx(styles.leftTitle)}>{title[pathName]}</span>
            </div>
            <div className={cx(styles.ledDiv)} style={{ height: '42px', lineHeight: "42px", textAlign: 'right' }}>
              <Avatar icon={<UserOutlined />} style={{ backgroundColor: '#90ACFF' }}/>
              <span className={cx(styles.nameSpn)}> 张末末</span>
            </div>
          </div>
          {children}
        </div>
      </Flexbox>
    </>
  );
});

Layout.displayName = 'DesktopMainLayout';

export default Layout;