import UserBar from '@/new-components/layout/UserBar';
import Icon, { AppstoreOutlined, BuildOutlined, ConsoleSqlOutlined, ForkOutlined, MessageOutlined, PartitionOutlined, SearchOutlined } from '@ant-design/icons';

import cls from 'classnames';
import 'moment/locale/zh-cn';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ModelSvg } from '@/components/icons';

function SideBar() {
  const { pathname } = useRouter();

  const menus = [
    {
      key: 'explore',
      name: '探索',
      isActive: pathname === '/',
      icon: <SearchOutlined />,
      path: '/',
    }, {
      key: 'app',
      name: '应用程序',
      path: '/construct/app',
      isActive: pathname === '/construct/app',
      icon: <AppstoreOutlined />,
    },
    {
      key: 'flow',
      name: 'AWEL 工作流',
      icon: <ForkOutlined />,
      isActive: pathname === '/construct/flow',
      path: '/construct/flow',
    },
    {
      key: 'models',
      name: '模型管理',
      path: '/construct/models',
      isActive: pathname === '/construct/models',
      icon: <Icon component={ModelSvg} />,
    },
    {
      key: 'database',
      name: '数据库',
      icon: <ConsoleSqlOutlined />,
      isActive: pathname === '/construct/database',
      path: '/construct/database',
    },
    {
      key: 'knowledge',
      name: '知识库',
      icon: <PartitionOutlined />,
      isActive: pathname === '/construct/knowledge',
      path: '/construct/knowledge',
    },
    {
      key: 'prompt',
      name: '提示词',
      icon: <MessageOutlined />,
      isActive: pathname === '/construct/prompt',
      path: '/construct/prompt',
    }
  ]
 
  return (
    <div
      className={`
        flex flex-col 
        justify-between
        h-screen px-4
        pt-4 
        bg-[#fff]
        
        animate-fade
        animate-duration-300`
      }
    >
      <div>
        <Link href='/' className=' flex items-center justify-center p-2 pb-4'>
          <Image src={'/LOGO_PVC.png'} alt='PVC-CHAT' width={40} height={40} />
          PVC-CHAT
        </Link>
        <div className='gap-2 flex flex-col '>
          {menus.map(item =>  (
              <Link
              href={item.path}
              key={item.path}
              style={{
                backgroundColor: item.isActive ? '#7288FA' : '',
                color: item.isActive ? '#fff' : ''
              }}
              className={cls(
                'flex items-center w-full h-12 px-4 cursor-pointer  dark:hover:bg-theme-dark hover:rounded-xl',
                {
                  'rounded-xl': item.isActive,
                  'hover:bg-[#d8d8d8]': !item.isActive,
                  'hover:text-[#3d8dfc]': !item.isActive,
                }
              )}
              >
                <div className='mr-3'>{item.icon}</div>
                <span className='text-sm'>{(item.name as any)}</span>
              </Link>
            )
          )}
        </div>
      </div>
      <div className='mb-4'>
        <UserBar />
      </div>
    </div>
  );
}

export default SideBar;