text: 'use strict';
  
  import React, { Component } from 'react';
  
  import {
    Image, 
    Text,
    View,
    StyleSheet,
    ListView,
    Header,
    Title,
    TouchableHighlight, 
    AlertIOS, 
    Modal
  } from 'react-native';
  
  import Button from 'react-native-button';
  import PopupDialog, { SlideAnimation } from 'react-native-popup-dialog';
  
  const PaymentDetail = require('./PaymentDetail');
  const Wallet = require('./Wallet');
  const Spacex = require('../images/spacexlogo.png');
  const Redcross = require('../images/redcross.png');
  const Newstory2 = require('../images/newstory2.png');
  const Makeawish = require('../images/makeawish.png');
  const styles = StyleSheet.create({
    container: { 
      flex: 1, 
      flexDirection: 'row', 
      justifyContent: 'space-between', 
      alignItems: 'center',
      backgroundColor: '#47A8BD', 
      padding: 10
    }, 
    thumbnail: { 
      width: 75, 
      height: 75,
      marginRight: 5,
      marginLeft: 5
    }, 
    poppic: { 
      width: 290, 
      height: 95,
      marginRight: 5,
      marginLeft: 5
    },
    rightContainer: { 
      marginRight: 10
    }, 
    title: { 
      fontSize: 20,
      marginBottom: 5,
      color: 'white',
      textAlign: 'left'
    },
    name: { 
      color: '#656565'
    }, 
    separator: { 
      height: 1, 
      backgroundColor: '#dddddd'
    }, 
    button: { 
      fontSize: 12, 
      color: 'white',
      marginLeft: 2,
      marginRight:2,
      backgroundColor: '#47A8BD',
      borderBottomRightRadius: 50,
      borderBottomLeftRadius: 50,
    }, 
    buttonContainer: { 
      justifyContent: "flex-end",
      alignItems: "flex-end", 
      paddingBottom:5, 
      height:20, 
      overflow:'hidden', 
      borderRadius:5, 
      backgroundColor: '#388697'
    }, 
    thankyou: { 
      marginTop: 10,
      marginRight: 8,
      marginLeft: 8
    }
  });
  
  const NONPROFIT_DATA = [ 
    {nonprofitData: {title: 'Thank you from Spacex', entity: "Space X", image: Spacex, image2: Spacex}}, 
    {nonprofitData: {title: 'Thank you', entity: "Red cross", image: Redcross, image2: Redcross}},
  ]
  
  const letter = 'Dear Valuable Contributor, '+
                  'you value your purchases and contribution to our organization. Just remember, we benefit from '+
                  'your purchases at your chosen merchants so keep it up. We look forward to building our relationship with you.';
  
  
  class TabBar extends Component { 
  
    constructor(props) {
         super(props);
         this.state = {
             dataSource: new ListView.DataSource({
                 rowHasChanged: (row1, row2) => row1 !== row2
             }), 
             isModalOpen: false
         };
     }
  
     componentDidMount() { 
      var nonprofits = NONPROFIT_DATA;
      this.setState({ 
        dataSource: this.state.dataSource.cloneWithRows(nonprofits)
      });
     }
  
     showNPODetail(npo) {
          console.log(this.props);
         this.props.navigator.push({
             title: npo.nonprofitData.title,
             component: PaymentDetail,
             passProps: {data}
         });
     }
  
     _handlePress() {
        {AlertIOS.alert('You are subscribed!')}
     }
  
     openModel() { 
        this.setState({isModalOpen: true});
     }
  
     closeModel() { 
      this.setState({isModalOpen: false});
     }
  
     pushDetail() {
      console.log(this.props)
      this.props.navigator.push({
        title: "test",
        component: PaymentDetail
      })
     }
  
     showThankYou() {
      AlertIOS.alert(
        letter
      )
     }
  
    render() { 
      return (
            <ListView 
              automaticallyAdjustContentInsets={false}
              dataSource={this.state.dataSource}
              renderRow={this.renderNPOs.bind(this)}
              style={styles.listView} />
      );
    }
  
    renderNPOs(npo) { 
      return (
        <View> 
        <TouchableHighlight
            onPress={() => {this.showThankYou()}}>
          <View> 
            <View style={styles.container}>
              <Image 
                  source={npo.nonprofitData.image}
                  style={styles.thumbnail} />
              <View style={styles.rightContainer}>
                <Text style={styles.title}>{npo.nonprofitData.title}</Text>
              </View>
            </View>
          <View style={styles.separator}/></View>
        </TouchableHighlight>
        </View>
      )
    }
  
  }
  
  module.exports = TabBar;
  
  
  
  // <PopupDialog
  //                 ref={(popupDialog) => { this.popupDialog = popupDialog; }}
  //                 dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
  //                 height={800}
  //                 width={310}
  //                 animationDuration={100}
  //                 title={"Thank You For Your Donation"}
  //                 haveOverlay={false}
  //                 >
  //                 <View>
  //                   <Text
  //                     style={styles.thankyou}>Dear Contributor,</Text>
  //                   <Text
  //                     style={styles.thankyou}>
  //                     We sincerely appreciate your contribution. We hope to continue this relationship
  //                     into the future. 
  //                   </Text>
  //                 </View>
  //         </PopupDialog>
  