import { Tooltip } from 'antd';
import classNames from 'classnames'
import './index.less'
import { CaretDownOutlined } from '@ant-design/icons'
import React from 'react'

export interface Item {
    name: string,
    type?: number,
    url?: string,
    crossDomain?: boolean,
    icon?: any,
    iconActive?: any,
}

interface Iprops {
    logoSrc?: string, // logo图片路径
    activeType: number, // 激活的type
    items?: Item[], // 系统的选项
    bottomItems?: Item[], // 位于底部的选项
    indicatorColor?: string, // 指针颜色
    onClick?: (item: Item) => void, // 点击选项的回调
}

export default function SystemNavigation(props: Iprops) {
    return (
        <div className="system-navigation">
            {props.logoSrc &&
                <div className="logo">
                    <img src={props.logoSrc} alt="logo" />
                </div>
            }
            <div className="main">
                {props.items && props.items.map(item => {
                    const isActive = item.type === props.activeType;
                    return (
                        <Tooltip title={item.name} key={item.type} placement="right" mouseEnterDelay={0} mouseLeaveDelay={0}>
                            <div className={classNames({
                                "left-tool-item": true,
                                "active": isActive
                            })} onClick={() => {
                                if (props.onClick) {
                                    props.onClick(item)
                                }
                            }}>
                                <div>{isActive ? item.iconActive : item.icon}</div>
                                <div className='indicator' style={{ color: props.indicatorColor ? props.indicatorColor : '#eee' }}><CaretDownOutlined /></div>
                            </div>
                        </Tooltip>
                    )
                })}
                <span className='tn-g-fill-remaining-space'></span>
                {props.bottomItems && props.bottomItems.map(item => {
                    const isActive = item.type === props.activeType;
                    return (
                        <Tooltip title={item.name} key={item.type} placement="right" mouseEnterDelay={0} mouseLeaveDelay={0}>
                            <div className={classNames({
                                "left-tool-item": true,
                                "active": isActive
                            })} onClick={() => {
                                if (props.onClick) {
                                    props.onClick(item)
                                }
                            }}>
                                <div>{isActive ? item.iconActive : item.icon}</div>
                                <div className='indicator'><CaretDownOutlined /></div>
                            </div>
                        </Tooltip>
                    )
                })}
            </div>
        </div>
    )
}