import './index.css';
import {MouseEvent} from "react";
import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
import MenuTree from "../../components/menu/MenuTree.tsx";

const projMenu: IMenuWithTopButton = {
    button: {
        name: '创建项目',
        handle(e: MouseEvent<HTMLButtonElement>) {
            console.log(e)
        }
    },
    list: [
        {id: 'proj1', icon: './vite.svg', name: '全部项目'},
        {id: 'proj2', icon: './vite.svg', name: '进行中的'},
        {id: 'proj3', icon: './vite.svg', name: '已完成的'}
    ],
    handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
        console.log(e);
        console.log(index);
        console.log(item)
    }
}

const agentMenu: IMenuWithTopButton = {
    button: {
        name: '代理服务',
        handle(e: MouseEvent<HTMLButtonElement>) {
            console.log(e)
        }
    },
    list: [
        {id: 'agent1', icon: './vite.svg', name: '全部项目'},
        {id: 'agent2', icon: './vite.svg', name: '进行中的'},
        {id: 'agent3', icon: './vite.svg', name: '已完成的'},
    ],
    handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
        console.log(e);
        console.log(index);
        console.log(item)
    }
}

export default function Index() {
    return (
        <div className="index">
            <div className="left">
                <MenuWithTopButton
                    button={projMenu.button}
                    list={projMenu.list}
                    handleListItem={projMenu.handleListItem}
                />
                <MenuTree/>
                <MenuWithTopButton
                    button={agentMenu.button}
                    list={agentMenu.list}
                    handleListItem={agentMenu.handleListItem}
                />
            </div>
            <div className="right"></div>
        </div>
    )
}