import * as React from 'react';
import {BasicContainerPropsInterface, BasicConfig, BasicContainer} from '../../render/core/Container/types';
import {Link} from 'react-router-dom';
import {createChild} from '../../render/util/createChild';
import componentLoader from '../../render/util/componentLoader';

export class LinkConfig extends BasicConfig {
    /**
     * 跳转模式
     */
    mode: 'a' | 'Link';

    /**
     * 跳转地址
     */
    src: string;

    /**
     * 字级元素
     */
    children: BasicConfig[];
}

export class LinkPropsInterface extends BasicContainerPropsInterface {
    info: LinkConfig;
}

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

    render() {
        let info = this.getPropsInfo(this.props.info);
        let children = info.children || [];
        let childElement = children.map((child, index) => {
            return createChild(child, {
                ...this.props,
                info: child,
                key: `Link_child_${index}_${child.type}`
            });
        });

        switch (info.mode) {
            default:
            case 'a':
                return <a href={info.src} className={info.className} style={info.style}>{childElement}</a>;
            case 'Link':
                return <Link to={info.src} className={info.className} style={info.style}>{childElement}</Link>;
        }
    }
}

componentLoader.addComponent('link', AbstractLink, LinkPropsInterface);