import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/core';
import PropTypes from 'prop-types';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme } from 'react-native-paper';

import PlatformUtils from '../../utils/platform';

/**
 * @param navigation
 * @param style {object}
 * @param position {string}
 * @returns {*}
 * @constructor
 */
function Close({ style, position }) {
  const navigation = useNavigation();
  const { colors } = useTheme();
  const innerPosition = position === 'left' ? { left: 20 } : { right: 20 };
  return PlatformUtils.isAndroid ? (
    <MaterialCommunityIcons
      onPress={() => navigation.goBack()}
      style={[styles.container, innerPosition]}
      name="close"
      color={colors.text}
      size={30}
    />
  ) : (
    <View style={styles.iosBarContainer}>
      <View
        style={[
          styles.iosBarContent,
          {
            backgroundColor: colors.text + '3D',
          },
        ]}
      />
    </View>
  );
}

Close.propTypes = {
  style: PropTypes.object,
  position: PropTypes.oneOf(['left', 'right']),
};

Close.defaultProps = {
  position: 'left',
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 20,
    opacity: 0.5,
    zIndex: 10,
  },
  iosBarContainer: {
    height: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iosBarContent: {
    height: 5,
    width: 75,
    borderRadius: 25,
    marginTop: 20,
  },
});

export default Close;