import * as React from 'react';
import {Link} from 'react-router-dom';
import {BasicConfig, BasicContainer, BasicContainerPropsInterface} from '../../render/core/Container/types';
import {Dropdown, Menu, Button, Icon} from '@native-ads/antd';
import componentLoader from '../../render/util/componentLoader';
import {ButtonType} from '@native-ads/antd/es/button';
import classNames from 'classnames';
import MenuItem from '@native-ads/antd/es/menu/MenuItem';
import './DropDown.less';

export class DropDownConfig extends BasicConfig {
    /**
     * 按钮的样式
     */
    buttonType: ButtonType;

    /**
     * 按钮的文字
     */
    buttonText: string;

    /**
     * 下拉选项
     */
    dropDownItems: {text: string, src?: string, link?: string}[];

    /**
     * 是否禁用
     */
    disabled: boolean;

    /**
     * 弹出位置
     */
    placement: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';

    /**
     * 触发下拉的行为
     */
    triggerType: ('click' | 'hover' | 'contextMenu')[];
}

export class DropDownPropsInterface extends BasicContainerPropsInterface {
    info: DropDownConfig;
}

export class AbstractDropDown extends BasicContainer<DropDownPropsInterface, {}> {
    constructor(props: DropDownPropsInterface) {
        super(props);
    }

    render() {
        let info = this.getPropsInfo(this.props.info);
        const extraClassName = 'rcre-drop-down-' + (info.buttonType || 'default');
        const menuClass = classNames({
            'rcre-drop-down': true,
            [extraClassName]: true
        });

        let dropDownItems = info.dropDownItems || [];

        const menu = (
            <Menu
                className={menuClass}
                onSelect={(param) => {
                    let index = param.key;
                    if (dropDownItems[index].link) {
                        location.href = dropDownItems[index].link;
                    }
                }}
            >
                {
                    dropDownItems.map((item, index) => {
                        let text: string | React.ReactNode = item.text;
                        if (item.link) {
                            text = <Link style={{color: 'inherit'}} to={item.link}>{text}</Link>;
                        }

                        if (item.src) {
                            text = <a style={{color: 'inherit'}} href={item.src}>{text}</a>;
                        }

                        return <MenuItem key={index}>{text}</MenuItem>;
                    })
                }
            </Menu>
        );

        return (
            <Dropdown
                overlay={menu}
                disabled={info.disabled}
                placement={info.placement}
                trigger={info.triggerType}
                onVisibleChange={(visible) => {
                    this.commonEventHandler('onVisibleChange', {
                        visible
                    });
                }}
            >
                <Button type={info.buttonType}>
                    {info.buttonText}
                    <Icon type="down" />
                </Button>
            </Dropdown>
        );
    }
}

componentLoader.addComponent('dropdown', AbstractDropDown, DropDownPropsInterface);