import * as React from 'react';
import * as _ from 'lodash';
import {BasicConfig, BasicContainer, BasicContainerPropsInterface} from '../../render/core/Container/types';
import componentLoader from '../../render/util/componentLoader';
import {Calendar} from '@native-ads/antd';
import moment, {Moment} from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

import './Calendar.less';
import {CalendarMode, CalendarProps} from '@native-ads/antd/lib/calendar';
import {createChild} from '../../render/util/createChild';

export class CalendarConfig extends BasicConfig {
    /**
     * 自定义渲染月单元格，返回内容会被追加到单元格
     */
    monthCellRender?: BasicConfig[];

    /**
     * 自定义渲染日期单元格，返回内容会被追加到单元格
     */
    dateCellRender?: BasicConfig[];

    /**
     * 自定义渲染月单元格，返回内容覆盖单元格
     */
    monthFullCellRender?: BasicConfig[];

    /**
     * 自定义渲染日期单元格，返回内容覆盖单元格
     */
    dateFullCellRender?: BasicConfig[];

    /**
     * 是否全屏显示
     */
    fullscreen?: boolean;

    /**
     * 国际化配置
     */
    locale?: object;

    /**
     * 初始模式，month/year
     */
    mode?: CalendarMode;

    /**
     * 默认展示的日期
     */
    defaultValue?: moment.Moment;

    /**
     * 展示日期
     */
    value: moment.Moment;

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

    /**
     * 设置自定义内容
     */
    controls?: {
        content: BasicConfig[];
        noContent: BasicConfig[];
    };

    /**
     * 设置自定义表头内容
     */
    headerControls?: BasicConfig[];

    /**
     * 设置自定义表头内容
     */
    headerType?: string;

    /**
     * 日期所需要的数据源
     */
    dataSource?: {};
}

export class CalendarPropsInterface extends BasicContainerPropsInterface {
    info: CalendarConfig;
}

class AbstractCalendar extends BasicContainer<CalendarPropsInterface, {}> {
    constructor(props: CalendarPropsInterface) {
        super(props);
    }

    private dateCellRender(value: Moment, info: CalendarConfig) {
        const dataSource = info.dataSource;
        if (info.controls && dataSource) {
            // 判断是否在data中
            const timestamp = value.startOf('days').unix();
            let content;
            if (_.hasIn(dataSource, timestamp)) {
                // 如果在data数组中存在
                content = info.controls.content.map((childInfo, key) => {
                    return createChild(childInfo, {
                        info: childInfo,
                        key: key,
                        $item: dataSource[timestamp]
                    });
                });
            } else {
                // 如果在data数组中不存在 则如下渲染
                if (info.controls.noContent) {
                    content = info.controls.noContent.map((childInfo, key) => {
                        return createChild(childInfo, {
                            info: childInfo,
                            key: key
                        });
                    });
                }
            }
            return content;
        }
        return;
    }

    private headerDescribeRender(info: CalendarConfig) {
        if (info.headerControls) {
            const content = info.headerControls.map((childInfo, key) => {
                return createChild(childInfo, {
                    info: childInfo,
                    key: key
                });
            });
            return (
                <div className="rcre-calendar-header">
                    {content}
                </div>
            );
        }
        return;
    }

    private mapCalendarOptions(info: CalendarConfig): CalendarProps {
        return {
            fullscreen: info.fullscreen,
            mode: info.mode,
            style: info.style
        };
    }

    render() {
        const info = this.getPropsInfo(this.props.info, this.props, ['controls'], true);
        const calendarProps = this.mapCalendarOptions(info);
        return (
            <div>
                <Calendar
                    dateCellRender={(value: Moment) => {
                        return this.dateCellRender(value, info);
                    }}
                    headerType={info.headerType}
                    headerDescribe={this.headerDescribeRender(info)}
                    defaultValue={info.defaultValue}
                    onSelect={(selectedDay: Moment) => {
                        this.commonEventHandler('onSelect', {selectedDay});
                    }}
                    {...calendarProps}
                />
            </div>
        );
    }
}

componentLoader.addComponent('calendar', AbstractCalendar, CalendarPropsInterface);

export default AbstractCalendar;