import React, { useState } from 'react';
import styles from './style/index.module.less';
import { Button, Divider, Input, Space, Table, Radio } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';

const Group = Radio.Group;

const GlobalVarContainer = () => {
  const [selectedItem, setSelectedItem] = useState('数字类型');

  const menuItems = [
    {
      key: '1',
      label: '我的组件',
      icon: '/ideContainer/icon/myComp.png',
      activeIcon: '/ideContainer/icon/myComp_active.png'
    },
    {
      key: '2',
      label: '协同组件',
      icon: '/ideContainer/icon/teamComp.png',
      activeIcon: '/ideContainer/icon/teamComp_active.png'
    },
    {
      key: '3',
      label: '组件审核',
      icon: '/ideContainer/icon/compAudit.png',
      activeIcon: '/ideContainer/icon/compAudit_active.png'
    }
  ];

  return (
    <div className={styles['comp-list-container']}>
      {/*左侧菜单*/}
      <div className={styles['comp-list-menu']}>
        {menuItems.map((item, index) => (
          <div
            key={index}
            className={selectedItem === item.label ? styles['selected'] : ''}
            onClick={() => setSelectedItem(item.label)}
          >
            <img src={selectedItem === item.label ? item.activeIcon : item.icon} alt=""
                 style={{ width: 20, height: 20, marginRight: 12 }} />
            <span>{item.label}</span>
          </div>
        ))}
      </div>
      <div className={styles['comp-list-content']}>
        {/*头部*/}
        <div className={styles['comp-list-header']}>
          <div className={styles['comp-list-search']}>
            <Space>
              <Input
                prefix={<IconSearch />}
                placeholder={'搜索'}
                style={{ width: 236 }}
              />
              <Button
                type="primary"
                style={{ marginLeft: 5, borderRadius: 4 }}
              >
                搜索
              </Button>
            </Space>
          </div>
          <div className={styles['comp-list-handle']}>
            <Radio.Group defaultValue={'Beijing'} name="button-radio-group">
              {['未设计', '编码中', '已部署'].map((item) => {
                return (
                  <Radio key={item} value={item}>
                    {({ checked }) => {
                      return (
                        <Button tabIndex={-1} key={item} shape="round" type={checked ? 'primary' : 'default'}>
                          {item}
                        </Button>
                      );
                    }}
                  </Radio>
                );
              })}
            </Radio.Group>
            <Space split={<Divider type="vertical" />}>
              <Button type="secondary" style={{ borderRadius: 4 }}>生成组件</Button>
              <Button type="outline" style={{ borderRadius: 4 }}>导入组件</Button>
              <Button type="primary" style={{ borderRadius: 4 }}>+ 新增组件</Button>
            </Space>
          </div>

        </div>
        {/*数据列表*/}
        <div className={styles['comp-list-list']}>
          {/*<Table columns={columns} data={eventData} pagination={false} />*/}
        </div>
      </div>
    </div>
  );
};

export default GlobalVarContainer;