import * as React from 'react';
import {RouteProp, useNavigation} from '@react-navigation/native';
import {ProfileStackParams} from '../../routes/main';
import {CenteredView, CommentTile} from '../../components';
import {CommentType} from '../../types';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {SCREEN_WIDTH} from '../../utils/screenDimensions';
import {Button} from 'react-native-elements';
import {AddComment} from '../../components/';
import {useEffect} from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import {getMomentComments} from '../..//services';
import {useDispatch} from 'react-redux';
import {logout} from '../../store/actions';

/**
 * Comments Screen for an image uploaded
 * Displays all comments for a particular moment uploaded by the user followed by a text area to add the comment.
 * Comment is posted when return is pressed on the keypad.
 */

type MomentCommentsScreenRouteProps = RouteProp<
  ProfileStackParams,
  'MomentCommentsScreen'
>;

interface MomentCommentsScreenProps {
  route: MomentCommentsScreenRouteProps;
}

const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
  const navigation = useNavigation();
  const {moment_id, screenType} = route.params;
  const [commentsList, setCommentsList] = React.useState([]);
  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    const loadComments = async () => {
      const token = await AsyncStorage.getItem('token');
      if (!token) {
        dispatch(logout());
        return;
      }
      getMomentComments(moment_id, setCommentsList, token);
      setNewCommentsAvailable(false);
    };
    if (newCommentsAvailable) {
      loadComments();
    }
  }, [dispatch, moment_id, newCommentsAvailable]);

  return (
    <CenteredView>
      <View style={styles.modalView}>
        <View style={styles.header}>
          <Button
            title="X"
            buttonStyle={styles.button}
            titleStyle={styles.buttonText}
            onPress={() => {
              navigation.pop();
            }}
          />
          <Text style={styles.headerText}>
            {commentsList.length + ' Comments'}
          </Text>
        </View>
        <ScrollView
          style={styles.modalScrollView}
          contentContainerStyle={styles.modalScrollViewContent}>
          {commentsList &&
            commentsList.map((comment: CommentType) => (
              <CommentTile
                key={comment.comment_id}
                comment_object={comment}
                screenType={screenType}
              />
            ))}
        </ScrollView>
        <AddComment
          setNewCommentsAvailable={setNewCommentsAvailable}
          moment_id={moment_id}
        />
      </View>
    </CenteredView>
  );
};

const styles = StyleSheet.create({
  header: {flexDirection: 'row'},
  headerText: {
    position: 'relative',
    left: '180%',
    alignSelf: 'center',
    fontSize: 18,
    fontWeight: '500',
  },
  container: {
    position: 'relative',
    top: '5%',
    left: '5%',
    backgroundColor: 'white',
    borderRadius: 5,
    width: SCREEN_WIDTH / 1.1,
    height: '55%',
  },
  button: {
    backgroundColor: 'transparent',
  },
  buttonText: {
    color: 'black',
    fontSize: 18,
    fontWeight: '400',
  },
  modalView: {
    width: '85%',
    height: '70%',
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOpacity: 30,
    shadowOffset: {width: 0, height: 2},
    shadowRadius: 5,
    borderRadius: 8,
    paddingBottom: 15,
    paddingHorizontal: 20,
    paddingTop: 5,
    justifyContent: 'space-between',
  },
  modalScrollViewContent: {
    justifyContent: 'center',
  },
  modalScrollView: {
    marginBottom: 10,
  },
});

export default MomentCommentsScreen;