import * as React from 'react';
import {BasicConfig, BasicContainer, BasicContainerPropsInterface} from '../../render/core/Container/types';
import componentLoader from '../../render/util/componentLoader';
import {Affix} from '@native-ads/antd';
import { createChild } from '../../render/util/createChild';

export class AffixConfig extends BasicConfig {
    /**
     * 距离窗口底部达到指定偏移量后触发
     */
    offsetBottom?: number;

    /**
     * 距离窗口顶部达到指定偏移量后触发
     */
    offsetTop?: number;

    /**
     * 被挂载的元素
     */
    children: BasicConfig[];
}

export class AffixPropsInterface extends BasicContainerPropsInterface {
    info: AffixConfig;
}

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

    render() {
        let info = this.getPropsInfo(this.props.info);
        let children = info.children || [];

        return (
            <Affix
                offsetTop={info.offsetTop}
                offsetBottom={info.offsetBottom}
                onChange={(affixed: boolean) => {
                    this.commonEventHandler('onChange', {
                        affixed: affixed
                    });
                }}
                style={info.style}
            >
                {children.map((childInfo, index) => {
                    return createChild(childInfo, {
                        ...this.props,
                        info: childInfo,
                        key: index
                    });
                })}
            </Affix>
        );
    }
}

componentLoader.addComponent('affix', AbstractAffix, AffixPropsInterface);