'use client';

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

import { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
import { usePlatform } from '@/hooks/usePlatform';
import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
import { Divider } from "antd";
import Avatar from './SideBar/Avatar';

import SideBar from './SideBar';


const title:{[key: string]: string } = {
  "/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 CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));

const Layout = memo<PropsWithChildren>(({ children }) => {
  const { isPWA } = usePlatform();
  const theme = useTheme();
  const { styles, cx } = useStyles()
  const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
  const pathName = window?.location?.pathname ?? '/welcome'
  // const pathName = '/welcome'

  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%'}
      >
        <SideBar />
        <div style={{width: '100%'}}>
           {/*<div style={{width: '100%'}}>*/}
           {/*  <div className={cx(styles.topCenten)}>*/}
           {/*   <div className={cx(styles.ledDiv)} style={{width: 'calc(100% - 60px)'}}>*/}
           {/*     <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={{lineHeight: '60px', width: '60px', verticalAlign: 'middle'}}>*/}
           {/*     <Avatar/>*/}
           {/*   </div>*/}
           {/* </div>*/}
          {/*</div>*/}
          {children}
        </div>
      </Flexbox>
    </>
  );
});

Layout.displayName = 'DesktopMainLayout';

export default Layout;
