'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, SearchOutlined } from '@ant-design/icons';
import { LayoutProps } from './type';
import { Divider, Input, Avatar } from "antd";

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

const Layout = memo<LayoutProps>(({ children, nav }) => {
  const { isPWA } = usePlatform();
  const theme = useTheme();
  const { styles, cx } = useStyles()

  const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);

  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}
        {children}
      </Flexbox>
    </>
  );
});

Layout.displayName = 'DesktopMainLayout';

export default Layout;