import {RouteProp} from '@react-navigation/native';
import React from 'react';
import {
  Alert,
  KeyboardAvoidingView,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {LinkerType} from 'src/types';
import {
  Background,
  LinkSocialMedia,
  RegistrationWizard,
} from '../../components';
import {SOCIAL_LIST} from '../../constants/';
import {AuthContext, OnboardingStackParams} from '../../routes';

/**
 * Social Media Screen for displaying social media linkers
 */

type SocialMediaRouteProps = RouteProp<OnboardingStackParams, 'SocialMedia'>;

interface SocialMediaProps {
  route: SocialMediaRouteProps;
}

const SocialMedia: React.FC<SocialMediaProps> = ({route}) => {
  const {userId, username} = route.params;
  const linkers: Array<LinkerType> = [];

  /**
   * login: determines if user successully created an account to
   * navigate to home and display main tab navigation bar
   */
  const {login} = React.useContext(AuthContext);

  //   let numSocials: Number = state.showMore ? 9 : 3;

  for (let i = 0; i < SOCIAL_LIST.length; i++) {
    let linker: LinkerType = {
      label: SOCIAL_LIST[i],
    };
    linkers.push(linker);
  }

  /**
   * Just commenting this out, in case we need it in the future
   */
  //   const handleShowPress = () => {
  //     setState({
  //       ...state,
  //       showMore: !state.showMore,
  //     });
  //   };

  const handleLogin = () => {
    try {
      login(userId, username);
    } catch (error) {
      console.log(error);
      Alert.alert('There was a problem logging you in');
    }
  };

  return (
    <Background style={styles.container}>
      <StatusBar barStyle="light-content" />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.container}>
        <RegistrationWizard style={styles.wizard} step="seven" />
        <View style={styles.headerContainer}>
          <Text style={styles.header}>SOCIAL MEDIA</Text>
          <Text style={styles.subtext}>
            Select the social media you want to add
          </Text>
        </View>
        <View style={styles.linkerContainer}>
          {linkers.map((linker, index) => (
            <LinkSocialMedia key={index} social={linker} />
          ))}
        </View>
      </KeyboardAvoidingView>
      <TouchableOpacity onPress={handleLogin} style={styles.loginButton}>
        <Text style={styles.loginButtonLabel}>Login</Text>
      </TouchableOpacity>
    </Background>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  headerContainer: {
    marginTop: '28%',
  },
  wizard: {
    ...Platform.select({
      ios: {
        top: 50,
      },
      android: {
        bottom: 40,
      },
    }),
  },
  linkerContainer: {
    bottom: '15%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignContent: 'center',
    marginBottom: '10%',
  },
  header: {
    color: '#fff',
    fontSize: 22,
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: '4%',
  },
  subtext: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: '35%',
    marginHorizontal: '10%',
  },
  loginButton: {
    backgroundColor: '#8F01FF',
    justifyContent: 'center',
    alignItems: 'center',
    width: 150,
    height: 40,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#8F01FF',
    marginBottom: '15%',
  },
  loginButtonLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ddd',
  },
});

export default SocialMedia;