import * as React from 'react';
import { IColDimensions } from '../../index.data';
import { get_allVisibleColumnWidth_exceptFrozen, HScrollBarHelper } from './helper';
import { AdaptiveScrollBar } from 'valor-random-ui';
import equals from 'fast-deep-equal';
import RuntimeContext from '../../RuntimeContext';
import { FSM_IGNORE } from '../../constants';

interface Props {
  colDimensions: IColDimensions;
  loadableColumnFlags: boolean[];
  scroll: number;
}

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

  constructor(props: Props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }

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

  handleScroll(scroll: number) {
    const state = this.context!.store.getState();
    if (state.scrollX !== scroll) {
      this.context!.patchState({ scrollX: scroll, readyDimensions: true });
      setTimeout(() => {
        this.context!.setSheetDimensions();
      });
    }
  }

  render() {
    const state = this.context!.store.getState();
    const helper = new HScrollBarHelper(state);
    const { scroll } = this.props;
    const contentSize = get_allVisibleColumnWidth_exceptFrozen(state);
    const barOffset = helper.barOffset;
    return (
      <AdaptiveScrollBar
        direction="h"
        contentSize={contentSize + state.padding.right}
        viewportSize={state.containerBox.w - barOffset}
        scrollSize={scroll}
        barWidth={16}
        barSize={helper.barSize}
        barStyle={{ bottom: 0, background: '#dedede', left: barOffset }}
        thumbStyle={{ background: '#666' }}
        visibleOn="needed"
        onScroll={this.handleScroll}
        delay={200}
        className={FSM_IGNORE}
      />
    );
  }
}

export default HScrollBar;

/*
interface Props {}

interface MappedProps {
  // 滚动条从哪里开始 ( sum(FrozonColWidth), 不用换算 )
  barOffset: number;
  // 滚动条有多高 ( containerHeight - barOffset - 底部留白20防止与HScrollBar相交 )
  barSize: number;
  // sheet可滚动部分的总高度, sheetScrollableHeight = sum(allRowHeight) + 500底部留白 - sum(allHiddenRowHeight) - sum(allFreezedRowHeight)
  // 滚动指示器从哪里开始 ( 在bar内部的相对高度, 1. 根据scrollY确定从哪一行开始显示(需考虑 hiddenRows) 2. scrollY/(sheetScrollableHeight + 500) )
  thumbOffset: number;
  // 滚动指示器有多高 ( barHeight / (sheetScrollableHeight + 500) * barHeight )
  thumbSize: number;
}
const HScrollBar: React.FC<Props & MappedProps> = props => {
  return (
    <div className={styles['bar']} style={{ left: props.barOffset, width: props.barSize }}>
      <div
        className={styles['thumb']}
        style={{ left: props.thumbOffset, width: props.thumbSize }}
      ></div>
    </div>
  );
};

const mapState = (state: IStoreState, props: Props): MappedProps => {
  const helper = new HScrollBarHelper(state);
  return {
    barOffset: helper.barOffset,
    barSize: helper.barSize,
    thumbOffset: helper.thumbOffset,
    thumbSize: helper.thumbSize,
  };
};

export default connect<Props, any, IStoreState, any>(mapState)(HScrollBar);
*/