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

import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import {
  View,
  ScrollView,
} from 'react-native';
import { Avatar } from 'react-native-elements';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';

type
  Props = {
  theme : Object,
};

function AvatarPage(props : Props) {
  const { theme } = props;
  return (
    <View style={Styles.container}>
      <NavigationBar
        title="头像"
        left={<BackButton />}
      />
      <ScrollView style={{ height: global.SCREEN_HEIGHT - 60 }}>
        <View style={{
          flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
        }}
        >
          <View style={{ margin: 10 }}>
            <Avatar
              rounded
              source={{
                uri:
                  'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
              }}
            />
          </View>
          <View style={{ margin: 10 }}>
            <Avatar rounded title="MD" />
          </View>
          <View style={{ margin: 10 }}>
            <Avatar rounded icon={{ name: 'home' }} />
          </View>
          <View style={{ margin: 10 }}>
            <Avatar
              source={{
                uri:
                  'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
              }}
              showEditButton
            />
          </View>
        </View>
        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
          <View style={{ margin: 10 }}>
            <Avatar
              size="small"
              rounded
              title="MT"
              onPress={() => console.log('Works!')}
              activeOpacity={0.7}
            />
          </View>
          <View style={{ margin: 10 }}>
            <Avatar
              size="medium"
              title="BP"
              onPress={() => console.log('Works!')}
              activeOpacity={0.7}
            />
          </View>
          <View style={{ margin: 10 }}>
            <Avatar
              size="large"
              title="LW"
              onPress={() => console.log('Works!')}
              activeOpacity={0.7}
            />
          </View>
          <View style={{ margin: 10 }}>
            <Avatar
              size="xlarge"
              rounded
              title="CR"
              onPress={() => console.log('Works!')}
              activeOpacity={0.7}
            />
          </View>
        </View>
      </ScrollView>
    </View>
  );
}


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

function propsMapping({ theme }) {
  return {
    theme,
  };
}

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