/**
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { LargeList } from 'react-native-largelist-v3';
import {
  Text,
  View,
} from 'react-native';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';

type
  Props = {
  theme: Object,
};

class SectionListPage extends Component<Props> {
  renderSection = (section: number) => {
    return (
      <View style={Styles.sectionBar}>
        <Text>
          Section
          {' '}
          {section}
        </Text>
      </View>
    );
  };

  renderIndexPath = ({ section, row }) => {
    return (
      <View style={[Styles.row]}>
        <Text>
          Section
          {' '}
          {section}
          {' '}
          Row
          {' '}
          {row}
        </Text>
        <View style={Styles.line} />
      </View>
    );
  };

  render() {
    const { theme } = this.props;
    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}>
        <NavigationBar
          title="粘性头"
          left={<BackButton />}
        />
        <LargeList
          style={[
            Styles.largeList,
            { height: global.SCREEN_HEIGHT },
          ]}
          data={data}
          heightForSection={() => 50}
          renderSection={this.renderSection}
          heightForIndexPath={() => 50}
          renderIndexPath={this.renderIndexPath}
        />
      </View>
    );
  }
}

function actionMapping(dispatch) {
  return {
    push: compose(dispatch, push),
  };
}
function propsMapping({ theme }) {
  return {
    theme,
  };
}

export default connect(propsMapping, actionMapping)(SectionListPage);
