import * as React from 'react';
import {useState, useEffect} from 'react';
import {View, Text, TouchableOpacity, Image, ImageBackground} from 'react-native';
import Theme from '../theme.style';
import Assets from '../assets.manager';
import Icon from '../icons.js';
import DB from '../storage';

const styles = {
    borderedButton: {
      padding: 5,
      borderColor: '#fff',
      borderRadius: 5,
      borderWidth: 2,
      height: 45,
      width: 130,
      margin: 5,
      justifyContent: 'center'
    },
    textBig: {
  
    }
  }


  class Header extends React.PureComponent {

    constructor(props) {
      super(props)
      this.btnstyle = { marginLeft: 10 };
      this.name = ''
      this.cardnumber = ''
      this.points = ''
    }

    state = {
      profile: null
    }

    componentDidMount() {
      this.init()
    }

    componentWillUnmount() {

    }

    init = async () => {
      let stored = await DB.profile()
      this.setState({ profile: stored })
      this.name = stored && stored?.data ? stored.data : {}
      this.cardnumber = stored && stored?.data ? stored.data.card_number : ''
      this.points = stored && stored?.data ? stored.data.points : ''
    }

    navigate = (screen, onBackPress) => {
      this.props.navigation.navigate('MyProfile', {
        tab: screen == "mycard" ? "ProfileCardTab" : "ProfileTransactionsTab",
        onBackPress: onBackPress
      });
    }

    openDrawer = () => { this.props.navigation.openDrawer() }

    render() {
      return (
        <View>
          <View style={{flexDirection: 'row', height: (Theme.screen.h / 3) + 15, padding: 0, backgroundColor: Theme.colors.primary}}>
            <ImageBackground
              source={Assets.cards.classic} 
              style={{flex: 1,
                resizeMode: "cover",
                justifyContent: "center"}
              }>
              <View style={{flex:1, justifyContent: 'center', borderColor: '#fff', borderWeight: 3}}>
              <TouchableOpacity style={this.btnstyle} onPress={() => this.openDrawer()}>
                <Icon.Feather name="menu" size={20} style={{color: '#fff'}} />
              </TouchableOpacity>
              </View>
              <View style={{flex:3, justifyContent: 'flex-start', alignItems: 'center', width: '100%'}}>
                <View style={{position: 'absolute', width: 78, height: 78, borderRadius: 40, marginTop: -35, borderColor: '#fff', zIndex: 1, borderWidth: 3}}>
                  <Image source={(this.state.profile && this.state.profile.data && this.state.profile.data?.photo) ? {uri: this.state.profile.data.photo} : Assets.logo.profileHolder} style={{ flex: 1, borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
                </View>
                <View style={{flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center'}}>
                  <Text style={{fontSize: 15, fontWeight: 'bold', color: '#ccc', marginTop: 35}}>
                    {this.name ? Theme.formatter.NAME(this.name) : ''}
                  </Text>
                  <Text style={{fontSize: 25, fontWeight: 'bold', color: '#ccc'}}>
                    {Theme.formatter.CN(this.cardnumber)}
                  </Text>
                  <Text style={{fontSize: 15, color: '#fff', marginBottom: 10}}>
                    Points: <Text style={{fontWeight: 'bold'}}> {Theme.formatter.CRNCY(this.points)}</Text>
                  </Text>
                </View>
              </View>
              <View style={{flex:1, justifyContent: 'center', alignItems: 'center', bottom: 15, borderColor: '#fff', borderWeight: 3}}>
                <View style={{flex: 1, flexDirection: 'row', marginBottom: 20}}>
                  <TouchableOpacity onPress={() => navigate("transactions", this.props.reload() || null)} style={styles.borderedButton}>
                    <Text style={{color: '#fff', alignSelf:'center'}}>My Transactions</Text>
                  </TouchableOpacity>
                  <TouchableOpacity onPress={() => navigate("mycard", this.props.reload() || null)} style={styles.borderedButton}>
                    <Text style={{color: '#fff', alignSelf:'center'}}>My Card</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </ImageBackground>
    
          </View>
        </View>
      )
    }
  }

  export default Header

// export default function Header({navigation, reload}){

//     const openDrawer = () => { navigation.navigation.openDrawer();}
//     const btnstyle = {marginLeft: 10};
//     const navigate = (screen, onBackPress) => {
//         // navigation.navigate("MyProfile", {screen: screen == "mycard" ? "ProfileCardTab" : "ProfileTransactionsTab", params: "card"})
//         navigation.navigation.navigate('MyProfile', {
//           tab: screen == "mycard" ? "ProfileCardTab" : "ProfileTransactionsTab",
//           onBackPress: onBackPress
//         });
//     }

//     const [profile, setprofile] = useState({})
//     const init = async () => {
//       let stored = await DB.profile()
//       setprofile(stored)
//     }
//     useEffect(() => {
//         init()        
//     }, [])

//     // console.log("PROFILE FROM EMPTY", profile)

//     let name = profile && profile?.data ? profile.data : {}
//     let cardnumber = profile && profile?.data ? profile.data.card_number : ''
//     let points = profile && profile?.data ? profile.data.points : ''

//     return (
//         <View>
//           <View style={{flexDirection: 'row', height: (Theme.screen.h / 3) + 15, padding: 0, backgroundColor: Theme.colors.primary}}>
//             <ImageBackground
//               source={Assets.cards.classic} 
//               style={{flex: 1,
//                 resizeMode: "cover",
//                 justifyContent: "center"}
//               }>
//               <View style={{flex:1, justifyContent: 'center', borderColor: '#fff', borderWeight: 3}}>
//               <TouchableOpacity style={btnstyle} onPress={openDrawer}>
//                 <Icon.Feather name="menu" size={20} style={{color: '#fff'}} />
//               </TouchableOpacity>
//               </View>
//               <View style={{flex:3, justifyContent: 'flex-start', alignItems: 'center', width: '100%'}}>
//                 <View style={{position: 'absolute', width: 78, height: 78, borderRadius: 40, marginTop: -35, borderColor: '#fff', zIndex: 1, borderWidth: 3}}>
//                   <Image source={profile && profile?.data ? {uri: profile.data.photo} : Assets.logo.profileHolder} style={{ flex: 1, borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
//                 </View>
//                 <View style={{flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center'}}>
//                   <Text style={{fontSize: 15, fontWeight: 'bold', color: '#ccc', marginTop: 35}}>
//                     {name ? Theme.formatter.NAME(name) : ''}
//                   </Text>
//                   <Text style={{fontSize: 25, fontWeight: 'bold', color: '#ccc'}}>
//                     {Theme.formatter.CN(cardnumber)}
//                   </Text>
//                   <Text style={{fontSize: 15, color: '#fff', marginBottom: 10}}>
//                     Points: <Text style={{fontWeight: 'bold'}}> {Theme.formatter.CRNCY(points)}</Text>
//                   </Text>
//                 </View>
//               </View>
//               <View style={{flex:1, justifyContent: 'center', alignItems: 'center', bottom: 15, borderColor: '#fff', borderWeight: 3}}>
//                 <View style={{flex: 1, flexDirection: 'row', marginBottom: 20}}>
//                     <TouchableOpacity onPress={() => navigate("transactions", reload || null)} style={styles.borderedButton}>
//                       <Text style={{color: '#fff', alignSelf:'center'}}>My Transactions</Text>
//                     </TouchableOpacity>
//                     <TouchableOpacity onPress={() => navigate("mycard", reload || null)} style={styles.borderedButton}>
//                       <Text style={{color: '#fff', alignSelf:'center'}}>My Card</Text>
//                     </TouchableOpacity>
//                   </View>
//               </View>
//             </ImageBackground>
    
//           </View>
//         </View>
//       );
// }