import { UnityAction } from '@/utils/utils';
import { useState } from 'react';
import styles from './index.less';

const menuList = [
  {
    name: '首页',
    icon: require('@/assets/menu/home.png'),
    // path: (projectId) => `/home/${projectId}`,
  },
  {
    name: '工况管理',
    icon: require('@/assets/menu/working.png'),
    // path: (projectId) => `/smart/work/${projectId}`,
  },
  {
    name: '系统自检',
    icon: require('@/assets/menu/setting.png'),
    // path: (projectId) => `/self-inspection/${projectId}`,
  },
  {
    name: '智能管控',
    icon: require('@/assets/menu/ai.png'),
    // path: (projectId) => `/hardware-controller/${projectId}`,
  },
  {
    name: '数字孪生',
    icon: require('@/assets/menu/number.png'),
  },
  {
    name: '智慧运营',
    icon: require('@/assets/menu/smart.png'),
    // path: (projectId) => `/smart-ops/${projectId}`,
  },
  {
    name: '安全管理',
    icon: require('@/assets/menu/safty.png'),
    // path: (projectId) => `/safety/${projectId}`,
  },
  {
    name: '任务管理',
    icon: require('@/assets/menu/walk.png'),
    // path: (projectId) => `/task-manage/${projectId}`,
  },
  {
    name: '设备管理',
    icon: require('@/assets/menu/device.png'),
    // path: (projectId) => `/device/${projectId}`,
  },
];

function Menu() {
  const [active, setActive] = useState('首页');
  const handleClick = (item) => {
    setActive(item.name);

    UnityAction.sendMsg('menuItem', item.name);
  };

  const handleBackClick = () => {
    UnityAction.sendMsg('HideMenu');
  };

  return (
    <div className={styles.main}>
      <div className={styles.menu}>
        {menuList.map((item) => (
          <div
            key={item.name}
            className={styles.text}
            onClick={() => handleClick(item)}
          >
            <img className={styles.icon} src={item.icon} />
            {item.name}
          </div>
        ))}
      </div>
      <div className={styles.arrowCon} onClick={handleBackClick}>
        <div className={styles.arrow} />
      </div>
    </div>
  );
}

export default Menu;