import React from 'react';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {View, Text, StatusBar, StyleSheet} from 'react-native';
import {RootStackParamList} from '../../routes';
import {Background, CenteredView} from '../../components';

type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
type ProfileScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Profile'
>;
interface ProfileProps {
  route: ProfileScreenRouteProp;
  navigation: ProfileScreenNavigationProp;
}
/**
 * Create Profile screen for onboarding.
 * @param navigation react-navigation navigation object.
 */

const Profile: React.FC<ProfileProps> = ({navigation}) => {
  /**
   * Profile screen "Add Large Profile Pic Here" button
   */
  const LargeProfilePic = () => (
    <View style={styles.container}>
      <View style={styles.largeButton}>
        <Text
          accessible={true}
          accessibilityLabel="ADD LARGE PROFILE PIC HERE"
          style={styles.addLargeProfilePicText}
          onPress={goToCamera}>
          ADD LARGE PROFILE PIC HERE
        </Text>
      </View>
    </View>
  );

  /**
   * Profile screen "Add Smaller Profile Pic Here" button
   */
  const SmallProfilePic = () => (
    <View style={styles.container}>
      <View style={styles.smallButton}>
        <Text
          accessible={true}
          accessibilityLabel="ADD SMALLER PIC"
          style={styles.addSmallProfilePicText}
          onPress={goToCamera}>
          ADD SMALLER PIC
        </Text>
      </View>
    </View>
  );

  /*
   * Handles tap on add profile picture buttons by navigating to camera access
   */
  const goToCamera = () => {
    navigation.navigate('Camera');
  };

  return (
    <Background>
      <StatusBar barStyle="light-content" />
      <CenteredView>
        <LargeProfilePic />
        <SmallProfilePic />
      </CenteredView>
    </Background>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  largeButton: {
    padding: 5,
    height: 180,
    width: 180,
    borderRadius: 400,
    backgroundColor: '#fff',
    justifyContent: 'center',
    marginTop: '100%',
    marginRight: '12%',
    zIndex: 2,
  },
  addLargeProfilePicText: {
    fontWeight: 'bold',
    padding: 22,
    fontSize: 12,
    color: '#863FF9',
    textAlign: 'center',
  },
  smallButton: {
    position: 'relative',
    padding: 5,
    height: 110,
    width: 110,
    borderRadius: 400,
    backgroundColor: '#E1F0FF',
    justifyContent: 'center',
    zIndex: 1,
    marginTop: '128%',
    marginLeft: '30%',
  },
  addSmallProfilePicText: {
    fontWeight: 'bold',
    padding: 10,
    fontSize: 12,
    color: '#806DF4',
    textAlign: 'center',
  },
});

export default Profile;