import * as React from 'react';
import {
  Image,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  View,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {TaggBigInput} from '../onboarding';
import {postMomentComment} from '../../services';
import {logout} from '../../store/actions';
import {useSelector, useDispatch} from 'react-redux';
import {RootState} from '../../store/rootreducer';

/**
 * This file provides the add comment view for a user.
 * Displays the logged in user's profile picture to the left and then provides space to add a comment.
 * Comment is posted when enter is pressed as requested by product team.
 */

export interface AddCommentProps {
  setNewCommentsAvailable: Function;
  moment_id: string;
}

const AddComment: React.FC<AddCommentProps> = ({
  setNewCommentsAvailable,
  moment_id,
}) => {
  const [comment, setComment] = React.useState('');

  const dispatch = useDispatch();
  const {
    avatar,
    user: {userId},
  } = useSelector((state: RootState) => state.user);

  const handleCommentUpdate = (comment: string) => {
    setComment(comment);
  };

  const postComment = async () => {
    try {
      const token = await AsyncStorage.getItem('token');
      if (!token) {
        dispatch(logout());
        return;
      }
      const postedComment = await postMomentComment(
        userId,
        comment,
        moment_id,
        token,
      );

      if (postedComment) {
        //Set the current comment to en empty string if the comment was posted successfully.
        handleCommentUpdate('');

        //Indicate the MomentCommentsScreen that it needs to download the new comments again
        setNewCommentsAvailable(true);
      }
    } catch (err) {
      console.log('Error while posting comment!');
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={130}>
      <View style={styles.container}>
        <Image
          style={styles.avatar}
          source={
            avatar
              ? {uri: avatar}
              : require('../../assets/images/avatar-placeholder.png')
          }
        />
        <TaggBigInput
          style={styles.text}
          multiline
          placeholder="Add a comment....."
          placeholderTextColor="gray"
          onChangeText={handleCommentUpdate}
          onSubmitEditing={postComment}
          value={comment}
        />
      </View>
    </KeyboardAvoidingView>
  );
};
const styles = StyleSheet.create({
  container: {flexDirection: 'row'},
  text: {
    position: 'relative',
    right: '18%',
    backgroundColor: 'white',
    width: '70%',
    paddingLeft: '2%',
    paddingRight: '2%',
    paddingBottom: '1%',
    paddingTop: '1%',
    height: 60,
  },
  avatar: {
    height: 40,
    width: 40,
    borderRadius: 30,
    marginRight: 15,
  },
});

export default AddComment;