'use client';

import { ChatHeader } from '@lobehub/ui';
import Link from 'next/link';
import { memo } from 'react';
import {createStyles, useTheme} from 'antd-style';
import { ProductLogo } from '@/components/Branding';
import { Divider, Avatar } from "antd";
import { UserOutlined, SearchOutlined } from '@ant-design/icons';
import CreateButton from '../../features/CreateButton';
import StoreSearchBar from '../../features/StoreSearchBar';
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: 1px;
    height: 26px;
    background-color: #d8d8d8;
    margin: 8px 16px;
  `,
  ledDiv: css `
    line-height: 52px;
    display: inline-block;
  `,
  nameSpn: css`
    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 title = {
  "/chat": '会话',
  "/discover/assistants": "助手",
  "/files": "工具",
  "/model": "模型",
  "/robot": "数字人",
  "/plugins": "插件",
  "/power": "算力",
  "/knowledge": "知识库"
}
const Header = memo(() => {
  const { styles, cx } = useStyles()
  return (
    <ChatHeader
      left={
        <div className={cx(styles.ledDiv)}>
          <span className={cx(styles.leftTitle)}>集智AI</span>
          <Divider className={cx(styles.dividerCen)} type="vertical" />
          <span className={cx(styles.leftTitle)}>{title[window?.location?.pathname]}</span>
        </div>
      }
      right={<>
          <Avatar style={{ backgroundColor: '#90ACFF' }} icon={<UserOutlined />} />
          <span className={cx(styles.nameSpn)}>张末末</span>
      </>}
      style={{
        position: 'relative',
        zIndex: 10,
        background: '#fff',
      }}
      styles={{
        center: { flex: 1, maxWidth: 1440 },
        left: { flex: 1, maxWidth: 240 },
        right: { flex: 1, maxWidth: 240 },
      }}
    >
      <StoreSearchBar />
    </ChatHeader>
  );
});

export default Header;
