import * as React from 'react';
import { IStoreState, ID, IDimension, IColDimensions, IRowDimensions } from '../index.data';
import { getCellDimensions } from '../store/selectors/selection';
import { connect } from 'unistore/react';
import equals from 'fast-deep-equal';
import RuntimeContext from '../RuntimeContext';

interface Props {
  highlightedCells: IStoreState['highlightedCells'];
  colDimensions: IColDimensions;
  rowDimensions: IRowDimensions;
  loadableRowFlags: boolean[];
  loadableColumnFlags: boolean[];
}
// type MappedProps = { cell2Dimension: Record<ID, IDimension> };

/// 暂未使用
class HighlightedCells extends React.Component<Props> {
  static contextType = RuntimeContext;
  context!: React.ContextType<typeof RuntimeContext>;

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

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

  render() {
    const { highlightedCells } = this.props;
    const state = this.context!.store.getState();
    const cell2Dimension = state.highlightedCells.reduce(
      (acc, it) => ({ ...acc, [it.id]: getCellDimensions(state, it.id) }),
      {} as Record<ID, IDimension>,
    );

    const m = highlightedCells.map(({ id, color }) => {
      const dim = cell2Dimension[id];
      if (dim.offsetWidth <= 1 || dim.offsetHeight <= 1) return null;
      const style = {
        // ...dim,
        width: dim.offsetWidth,
        height: dim.offsetHeight,
        left: dim.offsetLeft,
        top: dim.offsetTop,
        position: 'absolute',
        border: `2px solid ${color || '#8a1bc1'}`,
        pointerEvents: 'none',
      };
      const elId = `highlight-cell-${id}`;
      return <div key={elId} id={elId} style={style as any} />;
    });
    return <>{m}</>;
  }
}

const mapState = (state: IStoreState, props: Props) => {
  return {};
};
export default connect<Props, any, IStoreState, {}>(mapState)(HighlightedCells);