/**
 * 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 {
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import Styles from '../../theme/Styles';

const data = [
  {
    items: [
      { name: '页面跳转', page: 'JSPage' },
      { name: '设置主题', page: 'ThemePage' },
      { name: '粘性头', page: 'SectionList' },
      { name: '瀑布流', page: 'WaterList' },
      { name: '按钮', page: 'ButtonPage' },
      { name: '头像', page: 'AvatarPage' },
      { name: '徽章', page: 'BadgePage' },
      { name: '选择框', page: 'CheckBoxPage' },
      { name: '评分', page: 'RatingPage' },
      { name: '拖吧', page: 'SliderPage' },
    ],
  },
];

type
  Props = {
  theme: Object,
  pushTo: ()=> void
};

class FramePage extends Component<Props> {
  renderIndexPath = ({ section, row }) => {
    const { theme, pushTo } = this.props;
    const item = data[section].items[row];
    return (
      <View style={{ alignItems: 'stretch', justifyContent: 'center' }}>
        <TouchableOpacity
          onPress={() => pushTo(item.page)}
        >
          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
            <Text style={theme.titleText}>
              {item.name}
            </Text>
          </View>
        </TouchableOpacity>
        <View style={Styles.line} />
      </View>
    );
  };

  render() {
    const { theme } = this.props;

    return (
      <View style={theme.container}>
        <NavigationBar
          title="组件列表"
        />
        <LargeList
          style={[
            theme.largeList,
            { height: global.SCREEN_HEIGHT },
          ]}
          data={data}
          heightForIndexPath={() => 50}
          renderIndexPath={this.renderIndexPath}
        />
      </View>
    );
  }
}


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

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