// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { AutoSizer, List } from 'react-virtualized';
import type { Addresses } from '../../../api/addresses/types';
import styles from './VirtualAddressesList.scss';

type Props = {
  rows: Addresses,
  renderRow: Function,
};

/**
 *
 * The breakpoints define the number of lines
 * based on the width of the following element:
 *
 * `.ReactVirtualized__Grid__innerScrollContainer`
 *
 */
const BREAKPOINT_1_LINE = 1108;
const BREAKPOINT_2_LINES = 635;

const ADDRESS_LINE_HEIGHT = 22;
const ADDRESS_LINE_PADDING = 21;

@observer
export class VirtualAddressesList extends Component<Props> {

  list: List;
  lines: number = 0;
  height: number = ADDRESS_LINE_HEIGHT;

  calculateRowsHeight = (lines: number) => {
    this.height = (ADDRESS_LINE_HEIGHT * lines) + ADDRESS_LINE_PADDING;
  };

  /**
   * Gets the number of lines based on the container width
   * @param width
   * @returns {number}
   */
  getLinesFromWidth = (width: number) => {
    if (width >= BREAKPOINT_1_LINE) return 1;
    if (width >= BREAKPOINT_2_LINES) return 2;
    return 3;
  };

  /**
   * Decides if the addresses height need to be updated
   */
  onResize = ({ width }: { width: number }) => {
    const lines = this.getLinesFromWidth(width);
    if (lines !== this.lines) {
      this.lines = lines;
      this.calculateRowsHeight(lines);
    }
  };

  rowRenderer = ({
    index, // Index of row
    key, // Unique key within array of rendered rows
    style // Style object to be applied to row (to position it);
  }: { key: string, index: number, style: string }) => {
    const { rows, renderRow } = this.props;
    const address = rows[index];
    return (
      <div
        key={key}
        style={style}
        className={styles.address}
      >
        {renderRow(address, index)}
      </div>
    );
  };

  render() {
    const { rows } = this.props;
    if (!rows.length) return null;
    return (
      <div className={styles.component}>
        <AutoSizer onResize={this.onResize}>
          {({ width, height }) => (
            <List
              className={styles.list}
              ref={(list) => this.list = list}
              width={width}
              height={height}
              rowCount={rows.length}
              rowHeight={this.height}
              rowRenderer={this.rowRenderer}
            />
          )}
        </AutoSizer>
      </div>
    );
  }
}

@@ -36,32 +36,67 @@
 %7D from 'react';%0A
+import %7B throttle %7D from 'lodash';%0A
 import %7B observe
@@ -346,16 +346,53 @@
 on,%0A%7D;%0A%0A
+type State = %7B%0A  height: number,%0A%7D;%0A%0A
 /**%0A *%0A 
@@ -743,16 +743,23 @@
 nt%3CProps
+, State
 %3E %7B%0A%0A  l
@@ -790,16 +790,31 @@
 er = 0;%0A
+%0A  state = %7B%0A  
   height
@@ -814,25 +814,16 @@
  height:
- number =
  ADDRESS
@@ -834,16 +834,21 @@
 E_HEIGHT
+,%0A  %7D
 ;%0A%0A  cal
@@ -900,16 +900,32 @@
 his.
+setState(%7B%0A      
 height
- =
+:
  (AD
@@ -973,16 +973,24 @@
 _PADDING
+,%0A    %7D)
 ;%0A  %7D;%0A%0A
@@ -2163,16 +2163,25 @@
 Resize=%7B
+throttle(
 this.onR
@@ -2185,16 +2185,22 @@
 onResize
+, 100)
 %7D%3E%0A     
@@ -2458,16 +2458,22 @@
 t=%7Bthis.
+state.
 height%7D%0A

improve virtual address list height updating logic