import {
  CreateAnimation,
  IonButton,
  IonCol,
  IonIcon,
  IonLabel,
  IonRow,
} from "@ionic/react";
import { closeCircleOutline } from "ionicons/icons";
import { useEffect } from "react";
import { useState } from "react";

const ReplyTo = ({
  contact,
  replyToMessage = false,
  replyToAnimationRef,
  setReplyToMessage,
  messageSent,
}) => {
  const [cancellingReplyTo, setCancellingReplyTo] = useState(false);

  useEffect(() => {
    messageSent && cancelReplyTo();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [messageSent]);

  const slideAnimation = {
    property: "transform",
    fromValue: "translateY(100px)",
    toValue: "translateY(0px)",
  };

  const replyToAnimation = {
    duration: 300,
    direction: !cancellingReplyTo ? "normal" : "reverse",
    iterations: "1",
    fromTo: [slideAnimation],
    easing: "ease-in-out",
  };

  //  Cancel the reply-to
  const cancelReplyTo = async () => {
    setCancellingReplyTo(true);
    await replyToAnimationRef.current.animation.play();
    setCancellingReplyTo(false);
    setReplyToMessage(false);
  };

  return (
    <CreateAnimation ref={replyToAnimationRef} {...replyToAnimation}>
      <IonRow className="ion-align-items-center chat-reply-to-row" id="replyTo">
        <IonCol size="10" className="chat-reply-to-container">
          <IonLabel className="chat-reply-to-name">{contact}</IonLabel>
          <IonLabel className="chat-reply-to-message">
            {replyToMessage.preview}
          </IonLabel>
        </IonCol>

        <IonCol size="1">
          <IonButton fill="clear" onClick={cancelReplyTo}>
            <IonIcon size="large" icon={closeCircleOutline} color="primary" />
          </IonButton>
        </IonCol>
      </IonRow>
    </CreateAnimation>
  );
};

export default ReplyTo;