import { Drawer } from 'antd';
import { Fragment, useState } from 'react';
import { useStore, observer } from '@/stores/utils';
import Nav from '../Nav';
import './index.scss';
import { useNavigate } from 'react-router-dom';

const Header = () => {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const { ChatStore } = useStore();
  const navigate = useNavigate();
  return (
    <Fragment>
      <header className='header_wrap'>
        <div className='header_content flex_sb'>
          <div
            className='back_icon flex_left csp'
            onClick={() => {
              navigate('/');
            }}
          >
            <i className='iconfont icon-mjiantou-copy1' />
          </div>
          <div className='header_title'>AI搭子</div>

          <div className='top_menu flex'>
            <div
              className='menu_btn flex_c csp'
              onClick={() => {
                ChatStore.setCollapsed(false);
                setDrawerOpen(true);
              }}
            >
              <i className='iconfont icon-lishijilu1 '></i>
            </div>
            <div
              className='menu_btn flex_c csp'
              onClick={() => ChatStore.onAddConversation()}
            >
              <i className='iconfont icon-xinjianduihua '></i>
            </div>
          </div>
        </div>
      </header>
      <Drawer
        placement='left'
        onClose={() => setDrawerOpen(false)}
        open={drawerOpen}
        closeIcon={false}
        className='nav_drawer'
        width={260}
      >
        <Nav closeSideBarDrawer={() => setDrawerOpen(false)} />
      </Drawer>
    </Fragment>
  );
};

export default observer(Header);
