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

const WATER_IMAGE = require('./water.png');

type
  Props = {
  theme: Object,
};

function RatingPage(props:Props) {
  const { theme } = props;
  const ratingCompleted = (rating) => {
    console.log('Rating is: ', rating);
  };
  return (
    <View style={Styles.container}>
      <NavigationBar
        title="评分"
        left={<BackButton />}
      />
      <ScrollView>
        <View style={{ alignItems: 'center' }}>
          <Text style={{ margin: 20 }}>点击评分</Text>
          <AirbnbRating
            count={11}
            reviews={['Terrible', 'Bad', 'Meh', 'OK', 'Good', 'Hmm...', 'Very Good', 'Wow', 'Amazing', 'Unbelievable', 'Jesus']}
            defaultRating={11}
            size={20}
          />
          <Text style={{ margin: 20 }}>拖拽评分</Text>
          <Rating
            showRating
            onFinishRating={ratingCompleted}
            style={{ paddingVertical: 10 }}
          />
          <Text style={{ margin: 20 }}>拖拽评分</Text>
          <Rating
            type="heart"
            ratingCount={3}
            imageSize={60}
            showRating
            onFinishRating={ratingCompleted}
          />
          <Text style={{ margin: 20 }}>拖拽评分</Text>
          <Rating
            type="custom"
            ratingImage={WATER_IMAGE}
            ratingColor="#3498db"
            ratingBackgroundColor="#c8c7c8"
            ratingCount={10}
            imageSize={30}
            onFinishRating={ratingCompleted}
            style={{ paddingVertical: 10 }}
          />

          <Text style={{ margin: 20 }}>不能修改评分</Text>
          <Rating
            type="custom"
            ratingImage={WATER_IMAGE}
            ratingColor="#3498db"
            ratingBackgroundColor="#c8c7c8"
            ratingCount={10}
            imageSize={30}
            readonly
            onFinishRating={ratingCompleted}
            style={{ paddingVertical: 10 }}
          />


        </View>
      </ScrollView>
    </View>
  );
}


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

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