import React, { useState, useRef, useEffect, useContext } from "react";
import moment from "moment";
import { CheckCircleIcon } from "../../assets/svg/check_circle";
import { MessageBox } from "../index.styled";
import { getCookie } from "../../utils/helpers";
import Loader from "../../../loader";
import { OutletContext } from "../../../AppMainLayout";
import WaveSurferPlayer from "./waveSurferPlayer";
import { SendingStatusIcon } from "../../assets/svg/sending_status";

const MessageBubble = ({
  chat,
  idx,
  createMessageData,
  setNewMessages,
  newMessages,
  isMessageSending,
  lastMessage,
}) => {
  //always scroll to the last message
  const scroll = useRef();
  useEffect(() => {
    scroll.current?.scrollIntoView({ behavior: "smooth" });
  }, [chat]);

  //console.log("new mess", idx, newMessages?.length, lastMessage);

  return (
    <MessageBox>
      <div
        className={
          chat?.user_message ? "user-message-box" : "friend-message-box"
        }
        ref={scroll}>
        <div key={idx}>
          <span className={chat?.user_message ? "user-icon" : "friend-icon"}>
            {chat?.user_message && <CheckCircleIcon />}
          </span>
          {chat?.text ? (
            <div className={chat?.user_message ? "user-text" : "friend-text"}>
              <h6> {chat?.text}</h6>
              <p className="msg-time-stamp">
                {moment(chat?.created_at).format("h:mm a")}
              </p>
            </div>
          ) : (
            <>
              <div
                className={chat?.user_message ? "user-audio" : "friend-audio"}
              >
                <WaveSurferPlayer streamSrc={chat?.media?.url} />
                {/* <StreamAudioPlayer streamSrc={chat?.media?.url} /> */}
                {/* <WaveSurferPlayer
                    height={100}
                    waveColor="rgb(200, 0, 200)"
                    progressColor="rgb(100, 0, 100)"
                    url={chat?.media?.url}
                  /> */}
                <p className="msg-time-stamp">
                  {moment(chat?.media?.created_at).format("h:mm a")}
                </p>
              </div>
            </>
          )}
        </div>
      </div>
    </MessageBox>
  );
};

export default MessageBubble;
