import React, { ReactElement, useEffect } from 'react';
import { Tooltip, Checkbox } from 'antd';
import * as Tool from 'jad-tool'
import { FilterColumnsMenu } from '../../FilterColumnsMenu/FilterColumnsMenu';
import { Iconfont } from '../../Iconfont/Iconfont';

import { PageCore, PageCoreProps } from './PageCore';

type PageTableCoreProps = {
    table: ReactElement,
    // 自定义列
    tableColumns?: any[],                           // 自定义列: 原始column
    filterTableColumnsCacheKey?: string,            // 自定义列: Key
    onHandleColumnsChange?: (key:any) => void,      // 自定义列更新
    // 下载报表
    downloadTable?: (any) => void,
    dlLoading?: boolean,
    // 设置列宽
    onResetTableWidth?: () => void,
    // 过滤总数为0的列
    filterTableZeroDataChecked?: boolean,
    filterTableZeroDataCacheKey?: string,
    onFilterTableZeroData?: (any) => void,
    // 更多按钮    
    otherBtns?: ReactElement[],
    extraBtns?: ReactElement[] | ReactElement,
} & PageCoreProps;

const Tools = Tool.extend({
    setCacheData(key: string, value: any[]) {
        window.localStorage.setItem('JG_FilterZeroData_Cache_' + key, JSON.stringify(value))
    },
    getCacheData(key: string) {
        var value = window.localStorage.getItem('JG_FilterZeroData_Cache_' + key)
        return value ? JSON.parse(value) : null
    },
}, Tool)

export const PageTableCore:React.FunctionComponent<PageTableCoreProps> = (props) => {
    const {
        table,
        tableColumns,
        filterTableColumnsCacheKey,
        downloadTable,
        onHandleColumnsChange,
        dlLoading,
        otherBtns,
        extraBtns,
        title,
        onResetTableWidth,
        filterTableZeroDataChecked,
        filterTableZeroDataCacheKey,
        onFilterTableZeroData,
        children,
        ...pageCoreProps
    } = props;
    
    const onHandleChecked = (e) => {
        const checked = e.target.checked
        Tools.setCacheData(filterTableZeroDataCacheKey, checked)
        onFilterTableZeroData && onFilterTableZeroData(checked)
    }

    const extra = (
        <>
            {
                filterTableZeroDataCacheKey && filterTableZeroDataCacheKey.length > 0 && (
                    <Checkbox className='mr20' checked={filterTableZeroDataChecked} onChange={onHandleChecked}>过滤总数为0的列</Checkbox>
                )
            }
            {
                onResetTableWidth && (
                    <Tooltip title='重置列宽'>
                        <Iconfont
                            style={{ color: '#00000085', }}
                            type="icon-resst-column-width" className='mr28'
                            onClick={onResetTableWidth}
                        />
                    </Tooltip>
                )
            }
            {

                filterTableColumnsCacheKey && filterTableColumnsCacheKey.length > 0 && 
                    (
                        <FilterColumnsMenu
                            key={ filterTableColumnsCacheKey }
                            columns={ tableColumns }
                            cacheKey={ filterTableColumnsCacheKey }
                            initCallback
                            receivePropsUpdate
                            onChangeKey={ onHandleColumnsChange }
                        >
                            <Tooltip title='自定义列'>
                                <Iconfont style={{ color: '#00000085', }} type="icon-custom-column" className='mr28' />
                            </Tooltip>
                        </FilterColumnsMenu>
                    )
            }
            {
                downloadTable && (
                    <Tooltip title='下载报表'>
                        <Iconfont
                            style={{ color: '#00000085', }}
                            type="icon-download" className='mr28'
                            onClick={downloadTable}
                        />
                    </Tooltip>
                )
            }
            {
                (otherBtns || extraBtns)
            }
        </>
    );

    useEffect(() => {
        if (filterTableZeroDataCacheKey && filterTableZeroDataCacheKey.length > 0) {
            const cacheData = Tools.getCacheData(filterTableZeroDataCacheKey)
            if (cacheData === null) {
                Tools.setCacheData(filterTableZeroDataCacheKey, filterTableZeroDataChecked)
                return
            }
            onFilterTableZeroData && onFilterTableZeroData(cacheData)
        }
    }, [filterTableZeroDataCacheKey])

    return (
        <PageCore
            extra={extra}
            title={title}
            {...pageCoreProps}
        >
            { table }
        </PageCore>
    );
}