import { useEffect, useState } from 'react'

import './menu-with-bottom-button.css'

import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
// import serveImg from '../../static/left/serves.png'
import { useNavigate } from 'react-router-dom';
import { getMenuActive, setMenuActive } from '../../util/cache'
import { RightOutlined } from '@ant-design/icons'

// import newImg from '../../static/left/new.png'
// import {
//     RightOutlined1
// } from '@ant-design/icons';
export default function MenuWithTopButton(props: IMenuWithTopButton) {
    const navigate = useNavigate()
    const [menuItem, setMenuItem] = useState<IMenuListItem[]>([])
    useEffect(() => {
        setMenuItem(
            props.list.map((m) => {
                if (getMenuActive()) {
                    if (getMenuActive() == m.path) {
                        m['active'] = true
                    } else {
                        m['active'] = false
                    }
                }
                return m
            })
        )
    }, [getMenuActive()])

    const list = menuItem.map((item, index) => (
        // 创建项目下三个选项
        <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
            props.handleListItem(e, index, item);
            if (item.path) {
                setMenuActive(item.path)

                navigate(item.path);
            }
            // navigate('/home');

        }}>

            {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
            <span className="menu-name">{item.name}</span>
            <div className="botIcon">
                <RightOutlined />
            </div>
            {/* <span className='icon'><RightOutlined /></span> */}
        </li>
    ));

    return (
        <div className="menu-with-bot-button">
            {/* button 是三个黄色按钮 */}
            <div className='bot' onClick={(e) => {
                props.button.handle(e);
            }}>
                <div className='bot-lift'>
                    {/* <img src={serveImg} alt="" /> */}
                    <div className='sell-buy' style={{ display: props.button.name == '我要卖' ? 'block' : 'none' }}>卖</div>
                    <div className='sell-buy' style={{ display: props.button.name == '我要买' ? 'block' : 'none' }}>买</div>
                    <div> {props.button.name}</div>
                </div>

            </div>
            <ul>{list}</ul>
        </div>
    )
}