import React from 'react';

import { RelatedEmbedContainer } from '../../styles/components/blog/Post.style';
import { PostImage } from '../../styles/components/blog/PostsList.style';
import { BlogPostData } from '../../typings/entities';
import { Link } from '../../i18n';
import Placeholder from '../../assets/img/easyblog-square-placeholder.png';
import { PrismicDocument } from 'easy-prismic-react';

interface Props {
  shortCodeParams: any;
  postContext: any;
}

const RelatedPostEmbed: React.FC<Props> = ({ shortCodeParams, postContext }) => {
  function getRelatedPost (): PrismicDocument<BlogPostData> {
    if (!shortCodeParams?.length || !postContext?.related?.length) {
      return null;
    }
    const relatedIndex = parseInt(shortCodeParams[0]);
    if (isNaN(relatedIndex)) {
      return null;
    }
    return postContext?.related[relatedIndex - 1];
  }

  const relatedPost = getRelatedPost();
  const { data } = relatedPost;

  if (!relatedPost || !data) {
    return null;
  }

  return (
    <Link
      href={`/blog/[tag]/[post]?tag=${data.tag.uid}&post=${relatedPost.uid}`}
      as={`/blog/${data.tag.uid}/${relatedPost.uid}`}
    >
      <RelatedEmbedContainer>
        <PostImage image={data?.image?.url || Placeholder} />
        <div>
          À lire également
          <h4>{data?.title}</h4>
        </div>
      </RelatedEmbedContainer>
    </Link>
  );
};

export default RelatedPostEmbed;