import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Image,
  ListView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

import listBackground from '../images/list-background.png';
import Mini from './Mini';
import MiniListFooter from './MiniListFooter';
import MiniListLoading from './MiniListLoading';

const styles = StyleSheet.create({
  backgroundImage: {
    height: '100%',
    resizeMode: 'repeat',
    position: 'absolute',
    width: '100%',
  },
  container: {
    backgroundColor: 'cyan',
    flex: 1,
    position: 'relative',
  },
  footer: {
  },
  list: {
  },
  separator_1: {
    backgroundColor: 'thistle',
    height: 2,
  },
  separator_2: {
    backgroundColor: 'palegoldenrod',
    height: 2,
  },
  separator_3: {
    backgroundColor: 'lightsteelblue',
    height: 2,
  },
  separatorHighlighted: {
    backgroundColor: 'steelblue',
    height: 2,
  },
  top: {
    backgroundColor: 'cyan',
    height: 19,
    shadowColor: 'cyan',
    shadowOffset: {
      height: 6,
      width: 0,
    },
    shadowOpacity: 1,
    zIndex: 100,
  },
});

export default class MiniList extends Component {
  static renderSeparator(sectionId, rowId, adjacentRowHighlighted) {
    const style = adjacentRowHighlighted ?
      styles.separatorHighlighted :
      styles[`separator_${(rowId % 3) + 1}`];

    return (
      <View
        key={`${sectionId}-${rowId}`}
        style={style}
      />
    );
  }

  static rowHasChanged(r1, r2) {
    return r1 !== r2;
  }

  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({
      rowHasChanged: MiniList.rowHasChanged,
    });

    this.state = {
      dataSource: ds.cloneWithRows(props.products),
    };

    this.renderFooter = this.renderFooter.bind(this);
    this.renderRow = this.renderRow.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.products.length !== nextProps.products.length) {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(nextProps.products),
      });
    }
  }

  renderFooter() {
    const loading = this.props.isLoading ? <MiniListLoading /> : undefined;

    return (
      <View style={styles.footer}>
        {loading}
        <MiniListFooter />
      </View>
    );
  }

  renderRow(rowData, sectionId, rowId, highlightRow) {
    const onPress = () => {
      highlightRow(sectionId, rowId);
      this.props.onProductPress(rowData.productId);
    };

    return <Mini onPress={onPress} {...rowData} />;
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          background="cyan"
          barStyle="dark-content"
        />
        <Image
          source={listBackground}
          style={styles.backgroundImage}
        />
        <View style={styles.top} />
        <ListView
          dataSource={this.state.dataSource}
          onEndReached={this.props.onEndReached}
          renderFooter={this.renderFooter}
          renderRow={this.renderRow}
          renderSeparator={MiniList.renderSeparator}
          style={styles.list}
        />
      </View>
    );
  }
}

MiniList.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  onEndReached: PropTypes.func.isRequired,
  onProductPress: PropTypes.func.isRequired,
  products: PropTypes.arrayOf(PropTypes.shape({
    inStock: PropTypes.bool.isRequired,
    price: PropTypes.string.isRequired,
    productImage: PropTypes.string.isRequired,
    productName: PropTypes.string.isRequired,
  })).isRequired,
};


@@ -344,16 +344,60 @@
 ding';%0A%0A
+const SCROLL_VIEW_REF = 'SCROLL_VIEW_REF';%0A%0A
 const st
@@ -423,16 +423,16 @@
 reate(%7B%0A
-
   backgr
@@ -1878,24 +1878,386 @@
 this);%0A  %7D%0A%0A
+  componentDidMount() %7B%0A    const %7B initialScrollOffset %7D = this.props;%0A%0A    /* eslint-disable react/no-string-refs */%0A    if (initialScrollOffset && this.refs%5BSCROLL_VIEW_REF%5D) %7B%0A      this.refs%5BSCROLL_VIEW_REF%5D.scrollTo(%7B%0A        animated: false,%0A        x: 0,%0A        y: initialScrollOffset,%0A      %7D);%0A    %7D%0A    /* eslint-enable react/no-string-refs */%0A  %7D%0A%0A%0A
   componentW
@@ -3331,16 +3331,48 @@
 eached%7D%0A
+          ref=%7BSCROLL_VIEW_REF%7D%0A
         
@@ -3578,21 +3578,118 @@
 ist.
-propTypes = %7B
+defaultProps = %7B%0A  initialScrollOffset: 0,%0A%7D;%0A%0AMiniList.propTypes = %7B%0A  initialScrollOffset: PropTypes.number,
 %0A  i

Add scroll offset setting to `MiniList` component.