/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { LargeList } from 'react-native-largelist-v3';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { push } from '../BasicNavigator/actions';


type
Props = {};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  section: {
    flex: 1,
    backgroundColor: 'gray',
    justifyContent: 'center',
    alignItems: 'center',
  },
  row: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  line: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 1,
    backgroundColor: '#EEE',
  },
});

class FramePage extends Component<Props> {
  _renderSection = (section: number) => (
    <View style={styles.section}>
      <Text>
          Section
        {' '}
        {section}
      </Text>
    </View>
  );

  _renderIndexPath = ({ section, row }) => (
    <View style={styles.row}>
      <Text>
          Section
        {' '}
        {section}
        {' '}
Row
        {' '}
        {row}
      </Text>
      <View style={styles.line} />
    </View>
  );

  render() {
    const data = [];
    for (let section = 1; section <= 10; section += 1) {
      const sContent = { items: [] };
      for (let row = 1; row <= 10; row += 1) {
        sContent.items.push(row);
      }
      data.push(sContent);

    }
    return (
      <View style={styles.container}>

        <TouchableOpacity onPress={() => { this.props.push('ThemePage'); }}>
          <Text style={styles.instructions}>Frame</Text>
        </TouchableOpacity>
        <LargeList
          style={styles.container}
          data={data}
          heightForSection={() => 50}
          renderSection={this._renderSection}
          heightForIndexPath={() => 50}
          renderIndexPath={this._renderIndexPath}
        />
      </View>
    );
  }
}


function actionMapping(dispatch) {
  return {
    push: compose(dispatch, push),
  };
}
//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))

export default connect(null, actionMapping)(FramePage);
