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';
import { exp } from 'react-native-reanimated';

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: {}
  }

  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 : ''
  }

  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,
          }}>
            <View style={{flex: 1, flexDirection: 'row', marginTop: 20}}>
              <View style={{flex:1, borderColor: '#fff', borderWeight: 3}}>
                <TouchableOpacity style={[this.btnstyle, { marginBottom: 2, marginLeft: 15 }]} onPress={() => this.openDrawer()}>
                  <Icon.Feather name="menu" size={20} style={{color: '#fff'}} />
                </TouchableOpacity>
              </View>
              <View style={{flex:1, justifyContent: 'center', alignItems: 'center', width: '100%'}}>
                <View style={{width: 78, height: 78, borderRadius: 40, borderColor: '#fff', zIndex: 1, borderWidth: 3}}>
                  <Image source={Assets.logo.profileHolder} style={{ flex: 1, borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
                </View>
                <View style={{marginTop: 10, width: '100%', justifyContent: 'center', alignItems: 'center'}}>
                  <Text style={{fontSize: 20, fontWeight: 'bold', color: '#fff'}}>
                    Guest
                  </Text>
                </View>
              </View>
              <View style={{flex:1, borderColor: '#fff', borderWeight: 3}} />
            </View>
          
        </ImageBackground>
      </View>
    </View>
    )
  }
}

export default Header;