// import React from 'react'
import { useDispatch, useSelector } from "react-redux";
import reactStringReplace from "react-string-replace";
import Mention from "../Message/Mention";
import { ContentTypes } from "../../../app/config";
import MrakdownRender from "../MrakdownRender";
import closeIcon from "../../../assets/icons/close.circle.svg?url";
import pictureIcon from "../../../assets/icons/picture.svg?url";
import { getFileIcon, isImage } from "../../utils";
import { removeReplyingMessage } from "../../../app/slices/message";
import styled from "styled-components";
const Styled = styled.div`
  background-color: #f3f4f6;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 100%;
  padding: 12px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .prefix {
    color: #667085;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    em {
      font-weight: bold;
      color: #363f53;
    }
  }
  .content {
    color: #616161;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 30px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    .md {
      position: relative;
      max-height: 100px;
      overflow: hidden;
      &:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 63.54%,
          #f3f4f6 93.09%
        );
      }
    }
    .icon {
      width: 15px;
      height: 20px;
    }
    .name {
      margin-left: 5px;
      font-size: 10px;
      color: #555;
    }
  }
  .close {
    background: none;
    position: absolute;
    top: 16px;
    right: 16px;
    /* transform: translateY(-50%); */
  }
`;
const renderContent = (data) => {
  const { content_type, content, properties } = data;
  let res = null;
  switch (content_type) {
    case ContentTypes.text:
      res = reactStringReplace(
        content,
        /(\s{1}@[0-9]+\s{1})/g,
        (match, idx) => {
          console.log("match", match);
          const uid = match.trim().slice(1);
          return <Mention popover={false} key={idx} uid={uid} />;
        }
      );
      break;
    case ContentTypes.markdown:
      res = (
        <div className="md">
          <MrakdownRender content={content} />
        </div>
      );
      break;
    case ContentTypes.file:
      {
        const { content_type, name, size } = properties;
        if (isImage(content_type, size)) {
          res = <img className="pic" src={pictureIcon} />;
        } else {
          const icon = getFileIcon(content_type, name);
          res = (
            <>
              {icon}
              <span className="name">{name}</span>
            </>
          );
        }
      }
      break;
    default:
      break;
  }
  return res;
};
export default function Replying({ id, mid }) {
  const { msg, contactsData } = useSelector((store) => {
    return { contactsData: store.contacts.byId, msg: store.message[mid] };
  });
  const dispatch = useDispatch();
  const removeReply = () => {
    dispatch(removeReplyingMessage(id));
  };
  if (!msg) return null;
  const { from_uid } = msg;
  const user = contactsData[from_uid];
  return (
    <Styled className="reply">
      <span className="prefix">
        Replying to <em>{user?.name}</em>
      </span>
      <span className="content">{renderContent(msg)}</span>
      <button className="close" onClick={removeReply}>
        <img src={closeIcon} alt="close icon" />
      </button>
    </Styled>
  );
}
