import React, { memo, useState, useEffect } from 'react';
import { useQuery, useMutation } from '@apollo/react-hooks';
import PropTypes from 'prop-types';

import { CREATE_COMMENT, GET_IMAGE, GET_ANNOTATION } from '../resolvers';
import CloseBtn from './CloseBtn';
import Comments from './Comments';
import AddComment from './AddComment';

import { EditorArea } from '../AnnotationStyle';

function ViewSingleAnnotation(props) {
  const [comment, setComment] = useState('');
  const [commentReply, setReplyOnComment] = useState([]);
  const { data } = props;
  const {
    x,
    y,
    id,
    text,
    imageId,
    author: { name },
    closeAnnotation,
  } = data;

  const {
    deleteAnnotation,
    currentUser,
    commentId,
    updateComment,
    annotations,
    commentField,
  } = props;

  const { replyOnComment } = data;
  useEffect(() => {
    setReplyOnComment(replyOnComment);
  }, []);

  const addComment = async (e, createCommentMutation) => {
    const {
      data: { text },
    } = props;
    const { submitAnnotation, createAnnotation } = props;
    e.preventDefault();
    if (!text) {
      await submitAnnotation(comment, createAnnotation, createCommentMutation);
    } else {
      await createCommentMutation();
    }
    setComment('');
  };

  const onSubmit = async (cache, { data }) => {
    const { updateComments } = props;
    const { replyOnComment } = data.createComment;
    await updateComments(replyOnComment);
  };

  const update = async (cache, { data }) => {
    const commentId = data.deleteComment.id;
    const newComments = commentReply.filter(
      (comment) => comment.id !== commentId,
    );
    const { updateComments } = props;
    updateComments(newComments);
  };

  const onChange = async (e) => {
    const { updateComment } = props;
    setReplyOnComment(e.target.value);
    await updateComment(e.target.value);
  };

  const [createComment] = useMutation(CREATE_COMMENT, {
    variables: { annotationId: id, text: comment },
    refetchQueries: [{ query: GET_IMAGE, variables: { imageId } }],
    update: onSubmit,
  });

  return (
    <EditorArea x={x} y={y}>
      <form
        className={x < 50 ? 'show-right' : 'show-left'}
        key={`${id} + 1`}
        onSubmit={async (e) => {
          e.preventDefault();
          addComment(e, createComment, data, id);
          updateComment('');
        }}
      >
        <CloseBtn
          text={text}
          deleteAnnotation={deleteAnnotation}
          closeAnnotation={closeAnnotation}
        />

        <Comments
          text={text}
          replyOnComment={replyOnComment}
          update={update}
          imageId={imageId}
          name={name}
        />

        <AddComment
          id={id}
          currentUser={currentUser}
          commentField={commentField}
          onChange={onChange}
        />
      </form>
    </EditorArea>
  );
}

ViewSingleAnnotation.propTypes = {
  deleteAnnotation: PropTypes.func.isRequired,
  data: PropTypes.object.isRequired,
  updateComments: PropTypes.func.isRequired,
  currentUser: PropTypes.string.isRequired,
  submitAnnotation: PropTypes.func.isRequired,
  createAnnotation: PropTypes.func.isRequired,
};

export default memo(ViewSingleAnnotation);