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 (JSON.stringify(prevProps.dataSource) !== JSON.stringify(nextProps.dataSource)) {
            nextState.dataSource = nextProps.dataSource;
        }
        if (JSON.stringify(prevProps.columns) !== JSON.stringify(nextProps.columns)) {
            nextState.columns = nextProps.columns;
        }
        if (prevProps.tableId !== nextProps.tableId) {
            nextState.tableId = nextProps.tableId;
        }
        return nextState;
    }

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

    onScroll = () => {};

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

export default AirTable;
