import * as React from 'react';
import { IStoreState, IColumn, ID } from '../index.data';
import { connect } from 'unistore/react';
import classnames from 'classnames';
import styles from './index.less';
import { COL_SIZE_SENSOR, ROW_INDICATOR_WIDTH } from '../constants';
import equals from 'fast-deep-equal';
import SheetIndicator from '../indicators/SheetIndicator';
import ColumnIndicator from '../indicators/ColumnIndicator';
import RuntimeContext from '../RuntimeContext';

interface Props {
  loadableColumnFlags: boolean[];
}
class ColGroup extends React.Component<Props> {
  static contextType = RuntimeContext;
  context!: React.ContextType<typeof RuntimeContext>;

  constructor(props: Props) {
    super(props);
  }

  shouldComponentUpdate(nextProps: Props) {
    return !equals(nextProps, this.props);
  }

  render() {
    const { loadableColumnFlags } = this.props;
    const state = this.context!.store.getState();
    const { columns, colDimensions } = state;
    return (
      <>
        <colgroup>
          <col key={'first'} width={ROW_INDICATOR_WIDTH} />
          {columns.map(({ id }, j) => {
            // 注意这里有时需要手工设置 scrollX, 此时offsetWidth还没有同步过来, 所以只能使用width
            const width = loadableColumnFlags[j] ? columns[j].width : 0;
            return <col key={id} width={width} style={{ overflow: 'hidden' }} />;
          })}
        </colgroup>
        <thead>
          <tr>
            <SheetIndicator />
            {columns.map(({ id }, j) => {
              return <ColumnIndicator key={id} j={j}></ColumnIndicator>;
            })}
          </tr>
        </thead>
      </>
    );
  }
}

export default ColGroup;

// const mapState = (state: IStoreState, props: Props) => ({
//   columns: (state.columns || ([] as IColumn[])).map(col => ({ width: col.width, id: col.id! })),
// });

// export default connect<Props, any, IStoreState, MappedProps>(mapState)(ColGroup);

// {[ROW_INDICATOR_WIDTH, ...colWidths].map((w, i) => (
//   <col key={i} width={w} />
// ))}