/**
 * 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,
  Text,
  ScrollView,
} from 'react-native';
import { Avatar, Badge } 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 BadgePage(props : Props) {
  return (
    <View style={Styles.container}>
      <NavigationBar
        title="徽章"
        left={<BackButton />}
      />
      <ScrollView>
        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
          <View style={{ margin: 10 }}>
            <Badge value="99+" status="error" />
          </View>
          <View style={{ margin: 10 }}>
            <Badge value={<Text>My Custom Badge</Text>} />
          </View>
          <View style={{ margin: 10 }}>
            <Badge status="success" />
            <Text>success</Text>
          </View>
          <View style={{ margin: 10 }}>
            <Badge status="error" />
            <Text>error</Text>
          </View>
          <View style={{ margin: 10 }}>
            <Badge status="primary" />
            <Text>primary</Text>
          </View>
          <View style={{ margin: 10 }}>
            <Badge status="warning" />
            <Text>warning</Text>
          </View>
          <View>
            <Avatar
              rounded
              source={{
                uri: 'https://randomuser.me/api/portraits/men/41.jpg',
              }}
              size="large"
            />
            <Badge
              status="error"
              value="99+"
              containerStyle={{ position: 'absolute', top: -4, right: -4 }}
            />
          </View>
        </View>
      </ScrollView>
    </View>
  );
}


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

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

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