import * as React from 'react';
import { ID, IStoreState } from '../../index.data';
import { connect } from 'unistore/react';
import styles from '../index.less';
import classnames from 'classnames';
import { getRow, getRowi } from '../../store/selectors';
import { ROW_SIZE_SENSOR, ID_ROW_INDICATOR } from '../../constants';
import equals from 'fast-deep-equal';

/*
interface Props {
  rowId: ID;
}

interface MappedProps {
  i: number;
}
*/

interface Props {
  rowId: ID;
  i: number;
}

class RowIndicator extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
  }

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

  render() {
    const props = this.props;
    // console.log('row-indicator render');
    if (props.i < 0) return null;

    const { rowId, i } = props;
    return (
      <th
        id={`${ID_ROW_INDICATOR}:${rowId}`}
        data-id={rowId}
        className={classnames(styles['indicator'], ROW_SIZE_SENSOR)}
      >
        {i + 1}
      </th>
    );
  }
}

export default RowIndicator;

// const mapState = (state: IStoreState, props: Props) => {
//   const i = getRowi(state, props.rowId);
//   return {
//     // 注意: 由于无法保证渲染顺序, 如果删除一行, 则可能这里先于DataSheet执行, 从而造成空指针异常
//     i,
//   };
// };

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