import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React from 'react';
import {
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {Background, RegistrationWizard} from '../../../components';
import {OnboardingStackParams} from '../../../routes';
import {BackgroundGradientType} from '../../../types';

type CheckpointRouteProp = RouteProp<OnboardingStackParams, 'Checkpoint'>;
type CheckpointNavigationProp = StackNavigationProp<
  OnboardingStackParams,
  'Checkpoint'
>;
interface CheckpointProps {
  route: CheckpointRouteProp;
  navigation: CheckpointNavigationProp;
}
/**
 * Checkpoint to ask user if profile setup should be done
 * @param navigation react-navigation navigation object
 */
const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
  const {userId, username} = route.params;

  const handleSkip = () => {
    navigation.navigate('SocialMedia', {
      userId: userId,
      username: username,
    });
  };

  const handleProceed = () => {
    navigation.navigate('ProfileOnboarding', {
      userId: userId,
      username: username,
    });
  };

  return (
    <Background
      style={styles.container}
      gradientType={BackgroundGradientType.Light}>
      <StatusBar barStyle="light-content" />
      <RegistrationWizard style={styles.wizard} step="six" />
      <View style={styles.textContainer}>
        <Text style={styles.header}>You are registered!</Text>
        <Text style={styles.subtext}>
          We're almost there. Would you like to setup your profile now?
        </Text>
        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={handleSkip} style={styles.skipButton}>
            <Text style={styles.skipButtonLabel}>Do it later</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={handleProceed}
            style={styles.proceedButton}>
            <Text style={styles.proceedButtonLabel}>Let's do it!</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Background>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  textContainer: {
    marginTop: '65%',
  },

  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
  },
  wizard: {
    ...Platform.select({
      ios: {
        top: 50,
      },
      android: {
        bottom: 40,
      },
    }),
  },
  header: {
    color: '#fff',
    fontSize: 22,
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: '4%',
    marginHorizontal: '10%',
  },
  subtext: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: '16%',
    marginHorizontal: '10%',
  },
  proceedButton: {
    backgroundColor: '#8F01FF',
    justifyContent: 'center',
    alignItems: 'center',
    width: 150,
    height: 40,
    borderRadius: 5,
    marginTop: '5%',
  },
  proceedButtonLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#fff',
  },
  skipButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 150,
    height: 40,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#ddd',
    marginTop: '5%',
  },
  skipButtonLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ddd',
  },
});

export default Checkpoint;