import React, {Component} from 'react';
import {View, Text, TouchableOpacity, StyleSheet, Platform} from 'react-native';
import {colors} from '../assets/styles/colors-theme';
import history from '../common/history';
import NaviBar from './navi-bar';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {width, height} from '../common/screen';
import {Fonts} from '../assets/styles/fonts-theme';
export default class BackHeader extends Component {
  renderBackIcon() {
    if (this.props.back) {
      return (
        <TouchableOpacity
          style={{
            position: 'absolute',
            left: 20,
            justifyContent: 'center',
            alignItems: 'center',
            height: 40,
            width: 40,
          }}
          onPress={() => {
            console.log('back');
            history.goBack(this.props.instance);
          }}>
          <Icon
            name={'arrow-left'}
            size={22}
            color={'white'}
            style={{
              ...Platform.select({
                ios: {},
                android: {
                  top: 10,
                },
              }),
            }}
          />
        </TouchableOpacity>
      );
    } else {
      return null;
    }
  }

  render() {
    return (
      <View
        style={{
          width: width,
          height: Platform.OS === 'ios' ? 65 : 80,
          backgroundColor: colors.mainColor,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text
          style={{
            fontFamily: Fonts.ubuntu,
            color: 'white',
            fontSize: 20,
            marginTop: Platform.OS === 'ios' ? 0 : 15,
          }}>
          {this.props.title}
        </Text>
        {this.renderBackIcon()}
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: 100,
    height: Platform.OS === 'ios' ? 40 : 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.mainColor,
  },
  buttonText: {
    color: '#fff',
  },
});
