import {RouteProp} from '@react-navigation/core';
import {useNavigation} from '@react-navigation/native';
import React, {Fragment, useEffect, useState} from 'react';
import {
  Image,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {Button} from 'react-native-elements';
import {MainStackParams} from 'src/routes';
import {
  CaptionScreenHeader,
  ProfilePreview,
  SearchBackground,
  TaggLoadingIndicator,
} from '../../components';
import {TAGG_LIGHT_BLUE_2} from '../../constants';
import {ProfilePreviewType, ScreenType} from '../../types';
import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';

type TagFriendsScreenRouteProps = RouteProp<
  MainStackParams,
  'TagFriendsScreen'
>;
interface TagFriendsScreenProps {
  route: TagFriendsScreenRouteProps;
}
const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
  const {image, selectedUsers} = route.params;
  const navigation = useNavigation();
  const [loading, setLoading] = useState(false);
  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);

  useEffect(() => {
    setTaggedUsers(selectedUsers ? selectedUsers : []);
  }, [route.params]);

  /*
   * Navigate back to Tag Users Screen, send selected users
   */
  const handleDone = () => {
    navigation.navigate('CaptionScreen', {
      ...route.params,
      selectedUsers: taggedUsers,
    });
  };

  return (
    <SearchBackground>
      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.flex}>
          <View style={styles.contentContainer}>
            <View style={styles.buttonsContainer}>
              <Button
                title="Cancel"
                buttonStyle={styles.button}
                onPress={() => navigation.goBack()}
              />
              <Button
                title="Done"
                titleStyle={styles.shareButtonTitle}
                buttonStyle={styles.button}
                onPress={handleDone}
              />
            </View>
            <CaptionScreenHeader
              style={styles.header}
              title={'Tap on photo to Tag friends!'}
            />
            <Image
              style={styles.image}
              source={{uri: image.path}}
              resizeMode={'cover'}
            />
            <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
              <TouchableOpacity
                style={{
                  flexDirection: 'row',
                }}
                disabled={taggedUsers.length !== 0}
                onPress={() =>
                  navigation.navigate('TagSelectionScreen', {
                    selectedUsers: taggedUsers,
                  })
                }>
                <Image
                  source={require('../../assets/icons/tagging/tag-icon.png')}
                  style={{width: 20, height: 20, marginRight: '3%'}}
                />
                <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
              </TouchableOpacity>
              <View style={styles.tagFriendsContainer}>
                {taggedUsers.map((user) => (
                  <View>
                    <TouchableOpacity
                      onPress={() => console.log('Remove user')}>
                      <Image
                        source={require('../../assets/icons/tagging/x-icon.png')}
                        style={{
                          width: 15,
                          height: 15,
                          position: 'absolute',
                          right: 15,
                        }}
                      />
                    </TouchableOpacity>
                    <ProfilePreview
                      profilePreview={user}
                      previewType={'Tag Selection'}
                      screenType={ScreenType.Profile}
                    />
                  </View>
                ))}
                {taggedUsers.length !== 0 && (
                  <TouchableOpacity
                    onPress={() =>
                      navigation.navigate('TagSelectionScreen', {
                        selectedUsers: taggedUsers,
                      })
                    }
                    style={{
                      flexDirection: 'column',
                      alignItems: 'center',
                    }}>
                    <Image
                      source={require('../../assets/icons/tagging/white-plus-icon.png')}
                      style={{width: 38, height: 38, top: -2}}
                    />
                    <Text style={styles.taggMoreLabel}>{'Tagg More'}</Text>
                  </TouchableOpacity>
                )}
              </View>
            </View>
          </View>
        </KeyboardAvoidingView>
      </TouchableWithoutFeedback>
    </SearchBackground>
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    paddingTop: StatusBarHeight,
    justifyContent: 'flex-end',
  },
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: '5%',
    marginRight: '5%',
  },
  button: {
    backgroundColor: 'transparent',
  },
  shareButtonTitle: {
    fontWeight: 'bold',
    color: TAGG_LIGHT_BLUE_2,
  },
  header: {
    marginVertical: 20,
  },
  image: {
    position: 'relative',
    width: SCREEN_WIDTH,
    aspectRatio: 1,
    marginBottom: '3%',
  },
  text: {
    position: 'relative',
    backgroundColor: 'white',
    width: '100%',
    paddingHorizontal: '2%',
    paddingVertical: '1%',
    height: 60,
  },
  flex: {
    flex: 1,
  },
  tagFriendsTitle: {
    color: 'white',
    fontSize: normalize(12),
    lineHeight: normalize(16.71),
    letterSpacing: normalize(0.3),
    fontWeight: '600',
  },
  tagFriendsContainer: {
    flexDirection: 'row',
    marginTop: '3%',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
  },
  taggMoreLabel: {
    fontWeight: '500',
    fontSize: normalize(9),
    lineHeight: normalize(10),
    letterSpacing: normalize(0.2),
    color: 'white',
    textAlign: 'center',
    marginVertical: '5%',
  },
});

export default TagFriendsScreen;