import React from 'react';
import { Pagination } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
import { CommonProps, CommonState } from './interface';
import Table from './Table';
import OperateConfig from './operate';
import TableOperateConfig from './tableOperate';
import { defaultLocale } from '../locale';
import { Provider } from './context';

class AirTable extends React.Component<CommonProps, CommonState> {
    static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) {
        const { columns, dataSource } = prevState;

        const nextState: CommonState = {
            ...prevState,
        };
        if (JSON.stringify(dataSource) !== JSON.stringify(nextProps.dataSource)) {
            nextState.dataSource = nextProps.dataSource;
        }
        if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) {
            nextState.columns = nextProps.columns;
        }
        return nextState;
    }

    constructor(props: CommonProps) {
        super(props);
        const { columns, dataSource } = props;
        this.state = {
            columns,
            dataSource,
        };
    }

    onScroll = () => {
        const { onScroll } = this.props;
        if (typeof onScroll === 'function') {
            onScroll();
        }
    };

    getContext = () => {
        const { locale } = this.props;
        if (locale) {
            if (locale.context) {
                if (locale.lang && defaultLocale[locale.lang]) {
                    return { ...defaultLocale[locale.lang], ...locale.context };
                }
                return locale.context;
            }
        }
        return defaultLocale.cn;
    };

    render() {
        const { columns, dataSource } = this.state;
        const {
            className,
            tableClassName,
            rowStyle,
            rowClassName,
            distanceToLoad,
            emitChangeCell,
            bordered,
            width,
            height,
            operateConfig,
            paginationConfig,
            showIndex,
            showExpand,
            emptyPlaceholder,
            cellEditable,
            rowHeight,
            loading,
            rowSelection,
            tableOperateConfig,
            noDataPlaceholder,
            columnWidth,
            headerHeight,
            contentMenu,
            onScroll,
            loadComp,
            canResized,
            onDragResized,
            canFixed,
            onDragFixed,
            canSorted,
            onDragSorted,
            onEmitMsg,
            tableId,
            cachedFeAttr,
            renderFirstLeft,
            leftMargin,
        } = this.props;
        const sortConfig = operateConfig
            && operateConfig.menusGroup
            && operateConfig.menusGroup.find((item: any) => {
                return item.type === 'sort';
            });
        return (
            <Provider value={{ locale: this.getContext() }}>
                <div
                    className={classNames(styles.container, className)}
                >
                    {operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
                    <div
                        className={classNames(styles.tableContainer, tableClassName)}
                    >
                        {tableOperateConfig && (
                            <div className={styles.tableOperateContainer}>
                                <TableOperateConfig operateConfig={tableOperateConfig} />
                            </div>
                        )}
                        <div className={styles.tableC}>
                            <Table
                                tableId={tableId}
                                columns={columns}
                                dataSource={dataSource}
                                rowStyle={rowStyle}
                                rowClassName={rowClassName}
                                onScroll={onScroll ? this.onScroll : undefined}
                                distanceToLoad={distanceToLoad}
                                cellEditable={cellEditable}
                                emitChangeCell={emitChangeCell}
                                bordered={bordered}
                                width={width}
                                height={height}
                                rowHeight={rowHeight}
                                headerHeight={headerHeight}
                                columnWidth={columnWidth}
                                sortConfig={sortConfig}
                                paginationConfig={paginationConfig}
                                showIndex={showIndex}
                                showExpand={showExpand}
                                rowSelection={rowSelection}
                                loading={loading}
                                loadComp={loadComp}
                                noDataPlaceholder={noDataPlaceholder}
                                emptyPlaceholder={emptyPlaceholder}
                                contentMenu={contentMenu}
                                onEmitMsg={onEmitMsg}
                                cachedFeAttr={cachedFeAttr}
                                canResized={canResized}
                                onDragResized={onDragResized}
                                canFixed={canFixed}
                                onDragFixed={onDragFixed}
                                canSorted={canSorted}
                                onDragSorted={onDragSorted}
                                renderFirstLeft={renderFirstLeft}
                                leftMargin={leftMargin}
                            />
                        </div>
                    </div>
                    {paginationConfig && <Pagination {...paginationConfig} />}
                </div>
            </Provider>
        );
    }
}

export default AirTable;