import * as React from 'react';
import {BasicConfig, BasicContainer, BasicContainerPropsInterface} from '../../render/core/Container/types';
import componentLoader from '../../render/util/componentLoader';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import './Transfer.less';
import {Transfer, LocaleProvider} from '@native-ads/antd/';
import {TransferItem} from '@native-ads/antd/lib/transfer/index';
import zh_CN from '@native-ads/antd/lib/locale-provider/zh_CN';
import {isExpression, parseExpressionString} from '../../render/util/vm';

export class TransferConfig extends BasicConfig {
    /**
     * Transfer的数据模型Key
     */
    name: string;

    /**
     * 自定义类
     */
    className: string;

    /**
     * Transfer 使用了 react-lazy-load 优化性能，这里可以设置相关参数。设为 false 可以关闭懒加载。
     */
    lazy?: {} | boolean;

    /**
     * 使用ExpressionString来自定义渲染
     */
    renderStr?: string;

    /**
     * 两个穿梭框的自定义样式
     */
    listStyle?: React.CSSProperties;

    /**
     * 操作文案集合，顺序从下至上
     */
    operations?: string[];

    /**
     * 搜索框的默认值
     */
    searchPlaceholder?: string;

    /**
     * 显示在右侧框数据的key集合
     */
    targetKeys?: string[];

    /**
     * 是否显示搜索框
     */
    showSearch?: boolean;

    /**
     * 标题集合，顺序从左至右
     */
    titles?: string[];

    /**
     * 自定义样式
     */
    style?: React.CSSProperties;

    /**
     * 数据模型内容
     */
    dataSource: TransferItem[];

    /**
     * 默认显示在右侧框数据的key集合
     */
    defaultTargetKeys?: string[];

    // 自定义渲染 暂不支持
    // notFoundContent?: React.ReactNode;
    // filterOption?: (inputValue: any, item: any) => boolean;
    // render?: (record: TransferItem) => React.ReactNode;
    // footer?: (props: TransferListProps) => React.ReactNode;
    // body?: (props: TransferListProps) => React.ReactNode;
}

export class TransferPropsInterface extends BasicContainerPropsInterface {
    info: TransferConfig;
}

class AbstractTransfer extends BasicContainer<TransferPropsInterface, {}> {
    constructor(props: TransferPropsInterface) {
        super(props);
    }

    componentWillMount() {
        let info = this.getPropsInfo(this.props.info);
        if (info.name && this.props.$setData && info.defaultTargetKeys) {
            this.props.$setData(info.name, info.defaultTargetKeys);
        }
    }

    private mapTransferOptions(info: TransferConfig): any {
        return {
            className: info.className,
            lazy: info.lazy,
            listStyle: info.listStyle,
            operations: info.operations,
            searchPlaceholder: info.searchPlaceholder,
            showSearch: info.showSearch,
            titles: info.titles,
            style: info.style
        };
    }

    handleChange = (targetKeys: string[], direction: string, moveKeys: string[]) => {
        const info = this.getPropsInfo(this.props.info);
        if (this.props.$setData && info.name) {
            this.props.$setData(info.name, targetKeys);
        }

        this.commonEventHandler('onChange', {
            'targetKeys': targetKeys,
            'direction': direction,
            'moveKeys': moveKeys,
        });
    }

    render() {
        const info = this.getPropsInfo(this.props.info, this.props, ['renderStr']);
        const transferProps = this.mapTransferOptions(info);

        if (!info.name || !this.isUnderContainerEnv()) {
            console.error('You need to add name property for Transfer component');
        }

        let dataSource = info.dataSource;

        if (!(dataSource instanceof Array)) {
            dataSource = [];
        }

        let targetKeys = this.getValueFromDataStore(info.name) || [];

        return (
            <LocaleProvider locale={zh_CN}>
                <Transfer
                    {...transferProps}
                    titles={['备选频道', '已选频道']}
                    dataSource={dataSource}
                    targetKeys={targetKeys}
                    onChange={this.handleChange}
                    render={item => {
                        let renderStr = item.title;
                        let runTime = this.getRuntimeContext();

                        if (typeof info.renderStr === 'string' && isExpression(renderStr)) {
                            renderStr = parseExpressionString(renderStr, {
                                ...runTime,
                                $item: item
                            });
                        }

                        return renderStr;
                    }}
                />
            </LocaleProvider>
        );
    }
}

componentLoader.addComponent('transfer', AbstractTransfer, TransferPropsInterface);

export default AbstractTransfer;