/* eslint-disable react/prop-types */
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-dom/test-utils';
import FastScrollComponent from './FastScrollComponent';

describe('<FastScrollComponent>', function() {
  const setupComponent = ({ cacheWhenNotVisible = false, height = 100 }) => {
    // eslint-disable-line react/prop-types
    const rowHeight = 25;
    const rowWidth = 1000;

    const rowCount = 100;
    this.layers = new Array(rowCount);

    return (
      <div
        style={{
          width: rowWidth,
          height: height,
          position: 'relative',
        }}
      >
        <FastScrollComponent.Container
          width={rowWidth}
          height={rowCount * rowHeight}
          overscanPx={0}
          snapPx={1}
          ref={(el) => {
            this.container = el;
          }}
        >
          {new Array(rowCount).fill(0).map((_, x) => (
            <FastScrollComponent.Layer
              key={x}
              left={0}
              top={rowHeight * x}
              width={rowWidth}
              height={rowHeight}
              ref={(el) => {
                this.layers[x] = el;
              }}
              cacheWhenNotVisible={cacheWhenNotVisible}
            >
              {() => <div style={{ height: rowHeight }}>{x}</div>}
            </FastScrollComponent.Layer>
          ))}
        </FastScrollComponent.Container>
      </div>
    );
  };

  describe('cacheWhenNotVisible is false', () => {
    beforeEach(() => {
      this.component = window.renderComponent(setupComponent({}));
    });

    it('displays the top four elements and hides the rest', () => {
      expect(this.layers[3].state.rendered).toBeTruthy();
      expect(this.layers[4].state.rendered).toBeFalsy();
    });

    it('un-renders the top elements when scrolled', () => {
      this.container._root.scrollTop = 100; // scroll 4th element out
      ReactTestUtils.Simulate.scroll(this.container._root);
      jasmine.clock().tick(100);

      expect(this.layers[3].state.rendered).toBeFalsy();
      expect(this.layers[4].state.rendered).toBeTruthy();
    });

    it('renders additional elements when height is changed', () => {
      window.renderComponentAgain(this.component, setupComponent({ height: 200 }));
      jasmine.clock().tick(100); // trigger throttled update

      expect(this.layers[0].state.rendered).toBeTruthy();
      expect(this.layers[7].state.rendered).toBeTruthy();
      expect(this.layers[8].state.rendered).toBeFalsy();
    });
  });

  describe('cacheWhenNotVisible is true', () => {
    beforeEach(() => {
      this.component = window.renderComponent(
        setupComponent({
          cacheWhenNotVisible: true,
        }),
      );
    });

    it('displays the top four elements and hides the rest', () => {
      expect(this.layers[3].state.rendered).toBeTruthy();
      expect(ReactDOM.findDOMNode(this.layers[3]).style.display).toEqual('');
      expect(this.layers[4].state.rendered).toBeFalsy();
    });

    it('hides the top elements when scrolled', () => {
      this.container._root.scrollTop = 100; // scroll 4th element out
      ReactTestUtils.Simulate.scroll(this.container._root);
      jasmine.clock().tick(100);

      expect(this.layers[3].state.rendered).toBeTruthy();
      expect(ReactDOM.findDOMNode(this.layers[3]).style.display).toEqual('none');
      expect(this.layers[4].state.rendered).toBeTruthy();
      expect(ReactDOM.findDOMNode(this.layers[4]).style.display).toEqual('');
    });
  });
});