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 './TimeSelect.less';
import TimeSelect from '@native-ads/antd/lib/time-select';
import * as _ from 'lodash';

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

    /**
     * 默认数据源
     */
    defaultValue?: string | string[][];

    /**
     * 样式
     */
    style?: React.CSSProperties;

    /**
     * 数据格式类型
     */
    mode?: 'STRING' | 'RAW';
}

export class TimeSelectPropsInterface extends BasicContainerPropsInterface {
    info: TimeSelectConfig;
}

class AbstractTimeSelect extends BasicContainer<TimeSelectPropsInterface, {}> {
    constructor(props: TimeSelectPropsInterface) {
        super(props);
    }

    componentWillMount() {
        let info = this.getPropsInfo(this.props.info);
        if (this.props.$setData && info.name) {
            if (!_.isNil(info.defaultValue)) {
                this.props.$setData(info.name, info.defaultValue);
            } else {
                if (!info.mode || info.mode === 'STRING') {
                    this.props.$setData(info.name, '0,0,0,0,0,0,0');
                } else {
                    this.props.$setData(info.name, this.parseStringToTime('0,0,0,0,0,0,0'));
                }
            }
        }
    }

    // 编码转换函数
    private fillZero(num: string, digits: number) {
        let length = num.length;
        if (num.length < digits) {
            for (var i = 0; i < digits - length; i++) {
                num = '0' + num;
            }
        }
        return num;
    }

    // 字符串类型转数据源
    private parseStringToTime(timeStr: string): string[][] {
        return timeStr.split(',').map(group => {
            return this.fillZero(parseInt(group, 10).toString(2), 24)
                .split('')
                .reverse();
        });
    }

    // 数据源转字符串类型
    private stringifyTime(time: string[][]): string {
        return time.map((row) => {
            return parseInt(row.reverse().join(''), 2);
        }).join(',');
    }

    handleChange = (value: string[][]) => {
        const info = this.props.info;
        if (this.props.$setData && info.name) {
            let outputValue: string | string[][] = value;
            if (info.mode) {
                if (info.mode === 'STRING') {
                    outputValue = this.stringifyTime(value);
                }
                if (info.mode === 'RAW') {
                    outputValue = value;
                }
            } else {
                outputValue = this.stringifyTime(value);
            }
            this.props.$setData(info.name, outputValue);
        }
        this.commonEventHandler('onChange', {
            event,
            value: value
        });
    }
    render() {
        const info = this.getPropsInfo(this.props.info);

        if (!info.name) {
            return this.errorReport('name property is required for TimeSelect element', 'div');
        }

        if (!this.isUnderContainerEnv()) {
            return this.errorReport('TimeSelect component should be under container component', 'div');
        }

        let valueStore = this.getValueFromDataStore(info.name);
        let value: string[][] = [];

        let mode = info.mode || 'STRING';

        if (mode === 'STRING' && typeof valueStore === 'string') {
            value = this.parseStringToTime(valueStore);
        }
        if (mode === 'RAW') {
            value = valueStore;
        }
        return (
           <TimeSelect
               value={value}
               onChange={this.handleChange}
           />
        );
    }
}

componentLoader.addComponent('timeSelect', AbstractTimeSelect, TimeSelectPropsInterface);

export default AbstractTimeSelect;