import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {useDispatch} from 'react-redux';
import {
  BackgroundGradientType,
  CategorySelectionScreenType,
  LinkerType,
} from '../..//types';
import {
  Background,
  LinkSocialMedia,
  RegistrationWizard,
} from '../../components';
import {SOCIAL_LIST, MOMENT_CATEGORIES} from '../../constants/';
import {OnboardingStackParams} from '../../routes';

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

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

type SocialMediaNavigationProps = StackNavigationProp<
  OnboardingStackParams,
  'SocialMedia'
>;

interface SocialMediaProps {
  route: SocialMediaRouteProps;
  navigation: SocialMediaNavigationProps;
}

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

  //   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 handleNext = () => {
    navigation.navigate('CategorySelection', {
      screenType: CategorySelectionScreenType.Onboarding,
      user: {userId: userId, username: username},
      newCustomCategory: undefined,
    });
  };

  return (
    <Background
      style={styles.container}
      gradientType={BackgroundGradientType.Light}>
      <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={handleNext} style={styles.nextButton}>
        <Text style={styles.nextButtonLabel}>Next</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%',
  },
  nextButton: {
    backgroundColor: '#8F01FF',
    justifyContent: 'center',
    alignItems: 'center',
    width: 150,
    height: 40,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#8F01FF',
    marginBottom: '15%',
  },
  nextButtonLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ddd',
  },
});

export default SocialMedia;