import React from 'react';
import withRouter from './platforms/web/router/withRouter';
import PullToRefresh from './platforms/web/PullToRefresh';
import { createComponent as createReactComponent } from './page.react';
const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
export function createComponent(option, features) {
    const BaseComponent = createReactComponent(option, features);
    class Component extends BaseComponent {
        constructor(props) {
            super(props);
            this.handleResize = this.handleResize.bind(this);
            this.scrollEvent = this.scrollEvent.bind(this);
        }
        scrollEvent = (event) => {
            this.checkReachBottom(event?.target);
        };
        handlePullToRefresh = async () => {
            try {
                this.setState({
                    oakPullDownRefreshLoading: true,
                });
                await this.refresh();
                this.setState({
                    oakPullDownRefreshLoading: false,
                });
            }
            catch (err) {
                this.setState({
                    oakPullDownRefreshLoading: false,
                });
                throw err;
            }
        };
        handleResize() {
            const resizeOption = {
                size: {
                    windowHeight: window.innerHeight,
                    windowWidth: window.innerWidth,
                },
            };
            const { resize } = this.oakOption.lifetimes || {};
            resize && resize.call(this, resizeOption);
        }
        registerResize() {
            window.addEventListener('resize', this.handleResize);
        }
        unregisterResize() {
            window.removeEventListener('resize', this.handleResize);
        }
        registerPageScroll() {
            window.addEventListener('scroll', this.scrollEvent, true);
        }
        unregisterPageScroll() {
            window.removeEventListener('scroll', this.scrollEvent, true);
        }
        checkReachBottom(scrollTarget) {
            if (!this.supportPullDownRefresh()) {
                return;
            }
            const pullToRefreshContainer = scrollTarget instanceof Element
                ? scrollTarget.closest('.oak-pull-to-refresh-content')
                : undefined;
            const isCurrentReachBottom = pullToRefreshContainer
                ? pullToRefreshContainer.scrollHeight -
                    (pullToRefreshContainer.clientHeight + pullToRefreshContainer.scrollTop) <=
                    DEFAULT_REACH_BOTTOM_DISTANCE
                : document.body.scrollHeight -
                    (window.innerHeight + window.scrollY) <=
                    DEFAULT_REACH_BOTTOM_DISTANCE;
            if (!this.isReachBottom && isCurrentReachBottom && option.isList) {
                this.isReachBottom = true;
                // 执行触底事件
                this.loadMore();
                return;
            }
            this.isReachBottom = isCurrentReachBottom;
        }
        async componentDidMount() {
            this.registerResize();
            this.registerPageScroll();
            await super.componentDidMount();
        }
        componentWillUnmount() {
            this.unregisterResize();
            this.unregisterPageScroll();
            super.componentWillUnmount();
        }
        render() {
            const { oakPullDownRefreshLoading } = this.state;
            const renderResult = super.render();
            if (this.supportPullDownRefresh()) {
                return (<PullToRefresh onRefresh={this.handlePullToRefresh} refreshing={oakPullDownRefreshLoading} distanceToRefresh={DEFAULT_REACH_BOTTOM_DISTANCE} indicator={{
                        activate: this.t('common::ptrActivate', {
                            '#oakModule': 'oak-frontend-base',
                        }),
                        deactivate: this.t('common::ptrDeactivate', {
                            '#oakModule': 'oak-frontend-base',
                        }),
                        release: this.t('common::ptrRelease', {
                            '#oakModule': 'oak-frontend-base',
                        }),
                        finish: this.t('common::ptrFinish', {
                            '#oakModule': 'oak-frontend-base',
                        }),
                    }}>
                        {renderResult}
                    </PullToRefresh>);
            }
            return renderResult;
        }
    }
    return withRouter(Component, option);
}