import React, {useContext, useEffect, useRef, useState} from 'react';
import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  TextInput,
  View,
} from 'react-native';
import {useDispatch} from 'react-redux';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
import {postComment} from '../../services';
import {updateReplyPosted} from '../../store/actions';
import {CommentThreadType, CommentType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {mentionPartTypes} from '../../utils/comments';
import {CommentTextField} from './CommentTextField';
import MentionInputControlled from './MentionInputControlled';
import {normalize} from 'react-native-elements';

export interface AddCommentProps {
  momentId: string;
  placeholderText: string;
  callback?: (message: string) => void;
  onFocus?: () => void;
  isKeyboardAvoiding?: boolean;
  theme?: 'dark' | 'white';
}

const AddComment: React.FC<AddCommentProps> = ({
  momentId,
  placeholderText,
  callback = (_) => null,
  onFocus = () => null,
  isKeyboardAvoiding = true,
  theme = 'white',
}) => {
  const {setShouldUpdateAllComments, commentTapped} =
    useContext(CommentContext);
  const [inReplyToMention, setInReplyToMention] = useState('');
  const [comment, setComment] = useState('');
  const [keyboardVisible, setKeyboardVisible] = useState(false);
  const dispatch = useDispatch();
  const ref = useRef<TextInput>(null);
  const isReplyingToComment =
    commentTapped !== undefined && !('parent_comment' in commentTapped);
  const isReplyingToReply =
    commentTapped !== undefined && 'parent_comment' in commentTapped;
  const objectId: string = commentTapped
    ? 'parent_comment' in commentTapped
      ? (commentTapped as CommentThreadType).parent_comment.comment_id
      : (commentTapped as CommentType).comment_id
    : momentId;

  const addComment = async () => {
    const trimmed = comment.trim();
    if (trimmed === '') {
      return;
    }
    const message = inReplyToMention + trimmed;
    const postedComment = await postComment(
      message,
      objectId,
      isReplyingToComment || isReplyingToReply,
    );

    if (postedComment) {
      callback(message);
      setComment('');
      setInReplyToMention('');

      //Set new reply posted object
      //This helps us show the latest reply on top
      //Data set is kind of stale but it works
      if (isReplyingToComment || isReplyingToReply) {
        dispatch(
          updateReplyPosted({
            comment_id: postedComment.comment_id,
            parent_comment: {comment_id: objectId},
          }),
        );
      }
      setShouldUpdateAllComments(true);
    }
  };

  useEffect(() => {
    const showKeyboard = () => setKeyboardVisible(true);
    Keyboard.addListener('keyboardWillShow', showKeyboard);
    return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
  }, []);

  useEffect(() => {
    const hideKeyboard = () => setKeyboardVisible(false);
    Keyboard.addListener('keyboardWillHide', hideKeyboard);
    return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
  }, []);

  useEffect(() => {
    if (isReplyingToComment || isReplyingToReply) {
      // bring up keyboard
      ref.current?.focus();
    }
    if (commentTapped && isReplyingToReply) {
      const commenter = (commentTapped as CommentThreadType).commenter;
      setInReplyToMention(`@[${commenter.username}](${commenter.id}) `);
    } else {
      setInReplyToMention('');
    }
  }, [isReplyingToComment, isReplyingToReply, commentTapped]);

  const mainContent = () => (
    <View
      style={[
        theme === 'white' ? styles.containerWhite : styles.containerDark,
        keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
      ]}>
      <View style={styles.textContainer}>
        <MentionInputControlled
          containerStyle={styles.text}
          placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
          placeholder={placeholderText}
          value={inReplyToMention + comment}
          onFocus={onFocus}
          onChange={(newText: string) => {
            // skipping the `inReplyToMention` text
            setComment(
              newText.substring(inReplyToMention.length, newText.length),
            );
          }}
          inputRef={ref}
          partTypes={mentionPartTypes('blue', 'comment')}
          addComment={addComment}
          NewText={CommentTextField}
          theme={theme}
          keyboardVisible={keyboardVisible}
          comment={comment}
        />
      </View>
    </View>
  );

  return isKeyboardAvoiding ? (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
      {mainContent()}
    </KeyboardAvoidingView>
  ) : (
    mainContent()
  );
};

const styles = StyleSheet.create({
  containerDark: {
    alignItems: 'center',
    width: SCREEN_WIDTH,
  },
  containerWhite: {
    backgroundColor: '#f7f7f7',
    alignItems: 'center',
    width: SCREEN_WIDTH,
  },
  textContainer: {
    width: '95%',
    backgroundColor: '#e8e8e8',
    alignItems: 'center',
    justifyContent: 'space-between',
    margin: '3%',
    borderRadius: 25,
    height: normalize(40),
  },
  text: {
    flex: 1,
    // padding: '1%',
    maxHeight: 100,
  },
  avatar: {
    height: 35,
    width: 35,
    borderRadius: 30,
    marginRight: 10,
    marginLeft: '3%',
    marginVertical: '2%',
    alignSelf: 'flex-end',
  },
  submitButton: {
    height: 35,
    width: 35,
    backgroundColor: TAGG_LIGHT_BLUE,
    borderRadius: 999,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: '3%',
    marginVertical: '2%',
    alignSelf: 'flex-end',
  },
  whiteBackround: {
    backgroundColor: '#fff',
  },
});

export default AddComment;