import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Text,
  Navigator,
  TouchableOpacity,
  Image
} from 'react-native'
import TextPingFang from '../components/TextPingFang'
import BookCollectPage from './BookCollect'
import RentInfoPage from './RentInfo'
import FeedBackPage from './FeedBack'
import AboutUsPage from './AboutUs'
import SettingPage from './Setting'
import { Actions } from 'react-native-router-flux'
import * as scenes from '../constants/scene'
import {
  WIDTH,
  INNERWIDTH,
  HEIGHT,
  getResponsiveWidth,
  getResponsiveHeight
} from '../common/styles'

export default class ProfilePage extends Component {

  onJump(page, params) {
    Actions[page](params)
  }

  render() {
    const booklist = require('../../res/images/icon_booklist.png')
    const history = require('../../res/images/icon_history.png')
    const setting = require('../../res/images/icon_setting.png')
    // const apps = require("../../res/images/icon_apps.png")
    const feedback = require('../../res/images/icon_feedback.png')
    const aboutus = require('../../res/images/icon_aboutus.png')
    
    const texts = ['我的书单', '借阅历史', '设置', '意见反馈', '关于我们']
    const male_pic = require('../../res/images/avatar.png')
    const fm_pic = require('../../res/images/avatar2.png')
    const images = [booklist, history, setting, feedback, aboutus, images]

    return (
      <View style={styles.container}>
        <View style={styles.info_container}>
          <Image
            style={styles.avatar}
            source={require('../../res/images/avatar_bg.png')}
          >
            <Image
              style={styles.avatar_round}
              source={require('../../res/images/avatar_round.png')}
            >
              <Image
                style={this.props.user.user_sex ? { marginTop: -6 } : {}}
                source={this.props.user.user_sex ? fm_pic : male_pic}
              />
            </Image>

            <TextPingFang style={styles.avatar_font}>
              {this.props.user.user_name}
            </TextPingFang>
          </Image>
        </View>
        <View style={styles.items1}>
          {texts.map((d, i) => {
            if (i >= 3) return
            return (
              <TouchableOpacity
                key={i}
                onPress={() => {
                  let text = d
                  let pramas
                  switch (text) {
                    case '我的书单':
                      params = {
                        title: '我的书单'
                      }
                      this.onJump(scenes.SCENE_BOOK_COLLECT, params)
                      break
                    case '借阅历史':
                      params = {
                        title: '借阅历史'
                      }
                      this.onJump(scenes.SCENE_MESSAGE, params)
                      break
                    case '设置':
                      params = {
                        title: '借阅历史'
                      }
                      this.onJump(scenes.SCENE_SETTING, params)
                      break
                  }
                }}
                style={styles.item}
              >
                <Image source={images[i]} />
                <TextPingFang style={styles.item_font}>
                  {d}
                </TextPingFang>
                <Image
                  style={styles.item_arrow}
                  source={require('../../res/images/right_arrow.png')}
                />
              </TouchableOpacity>
            )
          })}
        </View>
        <View style={styles.items2}>
          {texts.map((d, i) => {
            if (i < 3) return
            return (
              <TouchableOpacity
                onPress={() => {
                  let params
                  switch (d) {
                    case '意见反馈':
                      this.onJump(scenes.SCENE_FEEDBACK, {})
                      break
                    case '关于我们':
                      this.onJump(scenes.SCENE_ABOUTUS, {})
                  }
                }}
                key={i}
                style={styles.item}
              >
                <Image source={images[i]} />
                <TextPingFang style={styles.item_font}>
                  {d}
                </TextPingFang>
                <Image
                  style={styles.item_arrow}
                  source={require('../../res/images/right_arrow.png')}
                />
              </TouchableOpacity>
            )
          })}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    height: HEIGHT,
    alignItems: 'center'
  },
  info_container: {
    alignItems: 'center',
    width: INNERWIDTH
  },
  avatar: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 52,
    width: INNERWIDTH
  },
  avatar_round: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  item: {
    width: WIDTH - getResponsiveWidth(30),
    flexDirection: 'row',
    marginLeft: getResponsiveWidth(30),
    alignItems: 'center',
    height: getResponsiveHeight(56)
  },
  item_font: {
    fontSize: 14,
    fontWeight: '500',
    color: '#666666',
    marginLeft: 16,
    width: 56
  },
  item_arrow: {
    position: 'absolute',
    right: getResponsiveWidth(30)
  },
  items1: {
    marginTop: 24
  },
  items2: {
    marginTop: 40
  },
  avatar_font: {
    color: '#666666',
    fontSize: 17,
    backgroundColor: 'rgba(0,0,0,0)',
    marginTop: 15,
    fontWeight: '600'
  }
})

@@ -660,22 +660,21 @@
 p(page, 
-params
+title
 ) %7B%0A    
@@ -687,22 +687,35 @@
 s%5Bpage%5D(
-params
+%7B%0A      title%0A    %7D
 )%0A  %7D%0A%0A 
@@ -2348,37 +2348,8 @@
 = d%0A
-                  let pramas%0A
     
@@ -2415,103 +2415,8 @@
 %E5%8D%95':%0A
-                      params = %7B%0A                        title: '%E6%88%91%E7%9A%84%E4%B9%A6%E5%8D%95'%0A                      %7D%0A
     
@@ -2472,22 +2472,20 @@
 OLLECT, 
-params
+text
 )%0A      
@@ -2543,103 +2543,8 @@
 %E5%8F%B2':%0A
-                      params = %7B%0A                        title: '%E5%80%9F%E9%98%85%E5%8E%86%E5%8F%B2'%0A                      %7D%0A
     
@@ -2595,22 +2595,20 @@
 ESSAGE, 
-params
+text
 )%0A      
@@ -2664,103 +2664,8 @@
 %E7%BD%AE':%0A
-                      params = %7B%0A                        title: '%E5%80%9F%E9%98%85%E5%8E%86%E5%8F%B2'%0A                      %7D%0A
     
@@ -2716,22 +2716,20 @@
 ETTING, 
-params
+text
 )%0A      

refactor jump