import React from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Size from '../common/size';
import Icon from 'react-native-vector-icons/FontAwesome5';
const size = new Size();
import {colors} from '../assets/styles/colors-theme';
import {Fonts} from '../assets/styles/fonts-theme';
import {width, height} from '../common/screen';

type Props = {
  title?: string,
  onRequestClose: () => void,
};

const HIT_SLOP = {top: 16, left: 16, bottom: 16, right: 16};

const ImageHeader = props => {
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.container}>
        <TouchableOpacity
          style={{
            alignItems: 'center',
            justifyContent: 'center',
            width: 45,
            height: 45,
          }}
          onPress={() => props.onPress && props.onPress()}>
          <Icon color={'white'} name="cloud-download-alt" size={23} />
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.closeButton}
          onPress={props.onRequestClose}
          hitSlop={HIT_SLOP}>
          <Text style={styles.closeText}>✕</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
  //     <SafeAreaView style={styles.root}>
  //       <View style={styles.container}>

  //         <TouchableOpacity
  //           style={{
  //             height: 50,
  //             width: width,
  //             justifyContent: 'center',
  //             alignItems: 'center',
  //             backgroundColor: colors.mainColor,
  //           }}
  //           onPress={props.onRequestClose}>
  //           <Icon name="sort-down" solid size={20} color={'white'} />
  //         </TouchableOpacity>
  //       </View>
  //     </SafeAreaView>
  //   );
};

const styles = StyleSheet.create({
  root: {
    backgroundColor: '#00000077',
  },
  container: {
    flex: 1,
    padding: 8,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  space: {
    width: 45,
    height: 45,
  },
  closeButton: {
    width: 45,
    height: 45,
    alignItems: 'center',
    justifyContent: 'center',
  },
  closeText: {
    lineHeight: 25,
    fontSize: 25,
    paddingTop: 2,
    includeFontPadding: false,
    color: '#FFF',
  },
  text: {
    maxWidth: 240,
    marginTop: 12,
    flex: 1,
    flexWrap: 'wrap',
    textAlign: 'center',
    fontSize: 17,
    lineHeight: 17,
    color: '#FFF',
  },
});

export default ImageHeader;
