import './index.css';
import {MouseEvent, useState} from "react";
import {Link, useNavigate} from "react-router-dom";
import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
import ListProj from "../../components/list/ListProj.tsx";
import ListProjAgent from "../../components/list/ListProjAgent.tsx";
import {Breadcrumb} from 'antd';

export default function Index() {
    const [listType, setListType] = useState('proj');
    const nav = useNavigate();
    const projMenu: IMenuWithTopButton = {
        button: {
            name: '创建项目',
            handle() {
                nav('/proj-create')
            }
        },
        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)
            setListType('proj');
        }
    }

    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)
            setListType('projAgent');
        }
    }

    return (
        <>
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>}
                ]}
            />
            <div className="index">
                <div className="left">
                    <MenuWithTopButton
                        button={projMenu.button}
                        list={projMenu.list}
                        handleListItem={projMenu.handleListItem}
                    />
                    <MenuTreeWithTopButton/>
                    <MenuWithTopButton
                        button={agentMenu.button}
                        list={agentMenu.list}
                        handleListItem={agentMenu.handleListItem}
                    />
                </div>
                <div className="right">{listType === 'proj' ? <ListProj/> : <ListProjAgent/>}</div>
            </div>
        </>
    )
}