import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { useAccount, useComment } from "@plebbit/plebbit-react-hooks";
import getDate from "../utils/getDate";
import getCommentMediaInfo from "../utils/getCommentMediaInfo";
import findShortParentCid from "../utils/findShortParentCid";
import Post from "./Post";
import EditLabel from "./EditLabel";
import useStateString from "../hooks/useStateString";
import { BoardForm, Container } from "./styled/views/Board.styled";
import useGeneralStore from "../hooks/stores/useGeneralStore";

const PostOnHover = ({ cid, feed }) => {
  const selectedStyle = useGeneralStore(state => state.selectedStyle);
  const account = useAccount();
  const reply = useComment({commentCid: cid});
  const replyMediaInfo = getCommentMediaInfo(reply);
  const fallbackImgUrl = "assets/filedeleted-res.gif";
  const selectedFeed = feed;
  const thread = useComment({commentCid: reply.parentCid});
  const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
  const stateString = useStateString(reply);

  return (
    <Container selectedStyle={selectedStyle} style={{
      margin: '0', 
      padding: '0',
      whiteSpace: 'normal',
      maxWidth: '100vw',
      overflowWrap: 'break-word',
      wordWrap: 'break-word',
      wordBreak: 'break-all',
      boxSizing: 'border-box',
  }}>
      <BoardForm selectedStyle={selectedStyle} style={{margin: '0', padding: '0'}}>
        <div className="board" style={{margin: '0', padding: '0'}}>
          <div className="thread" style={{margin: '0', padding: '0'}}>
            {reply.state === 'succeeded' ? (
                <div className="reply-container">
                  <div className="post-reply post-reply-desktop">
                    <div className="post-info">
                      <span className="nameblock">
                        {reply.author?.displayName
                          ? reply.author?.displayName.length > 20
                          ? <Fragment >
                              <span className="name"
                              data-tooltip-id="tooltip"
                              data-tooltip-content={reply.author?.displayName}
                              data-tooltip-place="top">
                                {reply.author?.displayName.slice(0, 20) + " (...)"}
                              </span>
                            </Fragment>
                            : <span className="name">
                              {reply.author?.displayName}</span>
                          : <span className="name">
                            Anonymous</span>}
                        &nbsp;
                        <span className="poster-address address-desktop"
                          id="reply-button" style={{cursor: "pointer"}}
                        >
                          (u/
                            {reply.author?.shortAddress ?
                              (
                                <span >
                                  {reply.author?.shortAddress}
                                </span>
                              ) : (
                                <span >
                                  {account?.author?.shortAddress}
                                </span>
                              )
                            }
                          )
                        </span>
                      </span>
                      &nbsp;
                      <span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
                      &nbsp;
                      <span className="post-number post-number-desktop">
                        <span >c/</span>
                          <Link to={() => {}} id="reply-button" 
                          title="Reply to this post">{reply.shortCid}</Link>
                      </span>&nbsp;
                      <div id="backlink-id" className="backlink">
                        {reply.replies?.pages?.topAll.comments
                          .sort((a, b) => a.timestamp - b.timestamp)
                          .map((reply, index) => (
                            <div style={{display: 'inline-block'}}>
                            <Link to={() => {}} 
                              className="quote-link">
                              c/{reply.shortCid}</Link>
                              &nbsp;
                            </div>
                          ))
                        }
                      </div>
                    </div>
                    {replyMediaInfo?.url ? (
                      <div className="file" 
                      style={{marginBottom: "5px"}}>
                        <div className="reply-file-text">
                          Link:&nbsp;
                          <a href={replyMediaInfo.url} target="_blank"
                          rel="noopener noreferrer">{
                          replyMediaInfo?.url.length > 30 ?
                          replyMediaInfo?.url.slice(0, 30) + "(...)" :
                          replyMediaInfo?.url
                          }</a>&nbsp;({replyMediaInfo?.type})
                        </div>
                        {replyMediaInfo?.type === "webpage" ? (
                          <div className="img-container">
                            <span className="file-thumb-reply">
                              {reply.thumbnailUrl ? (
                                <img 
                                src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
                                style={{cursor: "pointer"}}
                                onError={(e) => e.target.src = fallbackImgUrl} />
                              ) : null}
                            </span>
                          </div>
                        ) : null}
                        {replyMediaInfo?.type === "image" ? (
                          <div className="img-container">
                            <span className="file-thumb-reply">
                              <img 
                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
                              style={{cursor: "pointer"}}
                              onError={(e) => e.target.src = fallbackImgUrl} />
                            </span>
                          </div>
                        ) : null}
                        {replyMediaInfo?.type === "video" ? (
                          <span className="file-thumb-reply">
                            <video controls
                            
                            src={replyMediaInfo.url} alt={replyMediaInfo.type} 
                            onError={(e) => e.target.src = fallbackImgUrl} />
                          </span>
                        ) : null}
                        {replyMediaInfo?.type === "audio" ? (
                          <span className="file-thumb-reply">
                            <audio controls 
                            
                            src={replyMediaInfo.url} alt={replyMediaInfo.type} 
                            onError={(e) => e.target.src = fallbackImgUrl} />
                          </span>
                        ) : null}
                      </div>
                    ) : null}
                    {reply.content ? (
                      reply.content?.length > 500 ?
                      <Fragment >
                        <blockquote comment={reply} className="post-message">
                          {shortParentCid ? (
                            <Link to={() => {}} className="quotelink">
                                {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                            </Link>
                          ) : null}
                          <Post content={reply.content?.slice(0, 500)} />
                          <span className="ttl"> (...)
                          <br /> <EditLabel 
                          commentCid={reply.cid}
                          className="ttl"/><br />
                          Comment too long. Click the link to view.</span>
                        </blockquote>
                      </Fragment>
                    : <blockquote className="post-message">
                        {shortParentCid ? (
                          <Link to={() => {}} className="quotelink">
                              {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                          </Link>
                        ) : null}
                        <Post content={reply.content} comment={reply} />
                        <EditLabel 
                          commentCid={reply.cid}
                          className="ttl"/>
                      </blockquote>)
                    : null}
                  </div>
                </div>
              ) : (
              <div className="reply-container">
                <span className="ellipsis">{stateString}</span>
              </div>
            )}
          </div>
          <div className="thread-mobile">
            {reply.state === 'succeeded' ? (
            <div className="reply-container">
              <div className="post-reply post-reply-mobile">
                <div className="post-info-mobile">
                  <span className="name-block-mobile">
                    {reply.author?.displayName
                    ? reply.author?.displayName.length > 20
                    ? <Fragment>
                        <span className="name-mobile">
                          {reply.author?.displayName.slice(0, 20) + " (...)"}
                        </span>
                      </Fragment>
                      : <span className="name-mobile">
                        {reply.author?.displayName}</span>
                    : <span className="name-mobile">
                      Anonymous</span>}
                    &nbsp;
                    <span className="poster-address-mobile address-mobile"
                      id="reply-button" style={{cursor: "pointer"}}
                    >
                      (u/
                        {reply.author?.shortAddress ?
                          (
                          <span className="highlight-address-mobile">
                            {reply.author?.shortAddress}
                          </span>
                          ) : (
                            <span>
                              {account?.author?.shortAddress}
                            </span>
                          )
                        }
                      )&nbsp;
                    </span>
                    <br />
                  </span>
                  <span className="date-time-mobile post-number-mobile">
                  {getDate(reply.timestamp)}&nbsp;
                    <span>c/</span>
                      <Link to={() => {}} id="reply-button"
                      >{reply.shortCid}
                      </Link>
                  </span>
                </div>
                {reply.link ? (
                  <div className="file-mobile">
                      {replyMediaInfo?.url ? (
                        replyMediaInfo.type === "webpage" ? (
                          <div className="img-container">
                            <span className="file-thumb-mobile">
                              {reply.thumbnailUrl ? (
                                <img 
                                src={replyMediaInfo.thumbnail} alt="thumbnail" 
                                style={{cursor: "pointer"}}
                                onError={(e) => e.target.src = fallbackImgUrl} />
                              ) : null}
                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
                            </span>
                          </div>
                        ) : replyMediaInfo.type === "image" ? (
                          <div className="img-container">
                            <span className="file-thumb-mobile">
                              <img 
                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
                              style={{cursor: "pointer"}}
                              onError={(e) => e.target.src = fallbackImgUrl} />
                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
                            </span>
                          </div>
                        ) : replyMediaInfo.type === "video" ? (
                            <span className="file-thumb-mobile">
                                <video 
                                src={replyMediaInfo.url} alt={replyMediaInfo.type} 
                                style={{ pointerEvents: "none" }}
                                onError={(e) => e.target.src = fallbackImgUrl} />
                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
                            </span>
                        ) : replyMediaInfo.type === "audio" ? (
                            <span className="file-thumb-mobile">
                              <audio 
                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
                              onError={(e) => e.target.src = fallbackImgUrl} />
                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
                            </span>
                        ) : null
                      ) : null}
                  </div>
                ) : null}
                {reply.content ? (
                  reply.content?.length > 500 ?
                  <Fragment>
                    <blockquote className="post-message">
                    {shortParentCid ? (
                      <Link to={() => {}} className="quotelink">
                        {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                      </Link>
                    ) : null}
                      <Post content={reply.content?.slice(0, 500)} comment={reply} />
                      <span className="ttl"> (...)
                      <br />
                      <EditLabel 
                      commentCid={reply.cid}
                      className="ttl"/>
                      <br />
                      Comment too long. Click the link to view. </span>
                    </blockquote>
                  </Fragment>
                : <blockquote className="post-message">
                  {shortParentCid ? (
                    <Link to={() => {}} className="quotelink" >
                      {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                    </Link>
                  ) : null}
                    <Post content={reply.content} comment={reply} />
                    <EditLabel 
                    commentCid={reply.cid}
                    className="ttl"/>
                  </blockquote>)
                : null}
              </div>
            </div>
             ) : (
              <div className="reply-container">
                <span className="ellipsis">{stateString}</span>
              </div>
            )}
          </div>
        </div>
      </BoardForm>
    </Container>
  );
}

export default PostOnHover;