import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { PageFilter } from '../PageFilter/PageFilter';

const debugPageContentChildren = (props) => {
    let PageFilterElement = null;
    let PageCoreElements = [];
    let restChildren = [];
    const isPageFilterElement = (child:React.FunctionComponentElement<any>) => child.type && child.type.name === PageFilter.name
    const isPageCoreElement = (child:React.FunctionComponentElement<any>) => child.type && /^Page\w*Core$/.test(child.type.name);


    for (const child of React.Children.toArray(props.children)) {
        if (isPageFilterElement(child as any)) {
            if (PageFilterElement) {
                console.warn('PageContent: PageFilterElement need to only be one')
            }
            PageFilterElement = child;
        } else if (isPageCoreElement(child as any)) {
            PageCoreElements.push(child);
        } else {
            restChildren.push(child);
        }
    }
}

const PAGE_CONTENT_ID = 'new-layout-page-content';
const getPageContentPopupContainer = () => (document.getElementById(PAGE_CONTENT_ID));

/* PageContentContext: 用于存储PageContent下的 document.getElementById('new-layout-page-content')，减少页面重绘回流 */
const PageContentContext = React.createContext(null);

import { Select as AntdSelect } from 'antd';
import { DatePicker } from 'antd';
const AntdRangePicker = DatePicker.RangePicker;

// @ts-ignore
class RangePicker extends AntdRangePicker {
    static contextType = PageContentContext;
    render() {
        return (
            <AntdRangePicker
                getCalendarContainer={() => (this.context ? this.context : document.body)}
                {...this.props}>
            </AntdRangePicker>
        );
    }
}

class Select extends AntdSelect {
    static contextType = PageContentContext;
    render() {
        return (
            <AntdSelect
                getPopupContainer={() => (this.context ? this.context : document.body)}
                {...this.props}>
            </AntdSelect>
        )
    }
}

interface StaticComponents {
    Select: typeof Select,
    RangePicker: typeof RangePicker,
}

const PageContent:React.FunctionComponent<any> & StaticComponents = (props) => {
    const [ headerHeight, setHeaderHeight ] = useState('0px');
    const [ thisRef, setThisRef ] = useState(null);
    const pageContentId = props.id || PAGE_CONTENT_ID;
    useEffect(() => {
        const pageHeader = document.getElementById('page-header');
        if (pageHeader) {
            const { bottom } = pageHeader.getBoundingClientRect();
            setHeaderHeight(`${bottom || 0}px`);
        }
        setThisRef(document.getElementById(pageContentId));
    }, []);

    // debugPageContentChildren(props);
    const { children, className, style, ...rest} = props;
    return (
        <PageContentContext.Provider value={thisRef}>
            <div id={pageContentId} className={classNames('jad-page-layout1-content', className)}
                style={{ height: `calc(100vh - ${headerHeight})`, ...style}} { ...rest }>
                <div className={'jad-page-layout1-container'}>
                    { props.children }
                </div>
            </div>
        </PageContentContext.Provider >
    )
};

PageContent.Select = Select;
PageContent.RangePicker = RangePicker;

export {
    PageContent,
    getPageContentPopupContainer,
    RangePicker,
    Select
}