import React from 'react';
import styles from './index.less';
import { CommonProps, CommonState } from './interface';
import Table from './Table';

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

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

    constructor(props: CommonProps) {
        super(props);
        this.state = {
            prevProps: props,
            columns: [],
            dataSource: [],
            tableId: 1,
        };
    }

    onScroll = () => {};

    render() {
        const { columns, dataSource, tableId } = this.state;
        const operateConfig = {};
        return (
            <div className={styles.container}>
                <div className={styles.tableContainer}>
                    <Table
                        columns={columns}
                        dataSource={dataSource}
                        tableId={tableId}
                        onScroll={this.onScroll}
                        operateConfig={operateConfig}
                    />
                </div>
            </div>
        );
    }
}

export default AirTable;