import React, { useState } from 'react';
import { Button, Input, Space } from 'antd';
import { ReactComponent as SvgLogo } from '@/icons/logo.svg';


import './styles/side-menu.less';
import { SearchOutlined } from '@ant-design/icons';
import ProList from '@ant-design/pro-list';


interface SideMenuProps {
    onCollaped: (isExpanded: boolean)=> void,
    initWidth: number
}

function SideMenu  ({
    initWidth = 200,
}: SideMenuProps) {
  const [activeKey, setActiveKey] = useState<string | number>('');
  const data = [
    {
      teacherName: '张三',
      schoolName: '清华大学',
    },
    {
      teacherName: '李四',
      schoolName: '北京大学',
    },
    {
      teacherName: '王五',
      schoolName: '南京大学',
    },
    {
      teacherName: '麻六',
      schoolName: '上海大学',
    }
  ].map((item) => ({
    title: item.teacherName,
    description: item.schoolName,
    actions: [],
    avatar: false,
  }));

  return (
    <div style={{ width: initWidth, height: '100vh' }}>
      <div className="side-header">
        <SvgLogo style={{ fill: 'currentColor' }} className="header-logo" />
        <h3 className="header-title-text">评审管理系统</h3>
      </div>
      <div className="side-search">
        <div
          style={{
            color: 'black',
            fontSize: 16,
            fontWeight: 'bold',
            margin: '20px 0 20px 10px',
            textAlign: 'left',
          }}
        >
          参评教师
        </div>
        <Space direction="horizontal" style={{ padding: '0 10px' }}>
          <Input placeholder="输入教师姓名搜索" />
          <Button icon={<SearchOutlined />} type="primary" />
        </Space>
      </div>
      <div className="menu-area">
        <ProList<any>
          pagination={false}
          showActions="hover"
          onItem={(record) => {
            return {
              onClick: () => {
                setActiveKey(record.title);
              },
            };
          }}
          rowClassName={(record: { title: string }) =>
            record.title === activeKey ? 'active' : ''
          }
          metas={{
            title: {},
            description: {
              render: (text) => <div style={{ textAlign: 'left' }}>{text}</div>,
            },
            avatar: {},
          }}
          dataSource={data}
        />
      </div>
    </div>
  );
}

export default SideMenu;