import * as React from 'react';
import { ID, IStoreState } from '../../index.data';
import equals from 'fast-deep-equal';
import { COL_SIZE_SENSOR, ID_COLUMN_INDICATOR } from '../../constants';
import styles from '../index.less';
import classnames from 'classnames';
import { getColumnj } from '../../store/selectors/column';
import { connect } from 'unistore/react';
import { getLabelByJ } from '../../store/formula_support';
import RuntimeContext from '../../RuntimeContext';

interface Props {
  j: number;
}

class ColumnIndicator extends React.Component<Props> {
  static contextType = RuntimeContext;
  context!: React.ContextType<typeof RuntimeContext>;

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

  render() {
    const props = this.props;
    if (props.j < 0) return null;

    const { j } = props;

    const { columns } = this.context!.store.getState();
    const columnId = columns[j].id!;
    return (
      <th
        id={`${ID_COLUMN_INDICATOR}:${columnId}`}
        data-id={columnId}
        className={classnames(styles['indicator'], COL_SIZE_SENSOR)}
      >
        {getLabelByJ(j)}
      </th>
    );
  }
}

export default ColumnIndicator;