import React, { Component, createRef, RefObject } from 'react';

import { Author, PostContainer } from '../../styles/components/blog/Post.style';
import { BlogPostData } from '../../typings/entities';
import { Tag, PostImage } from '../../styles/components/blog/PostsList.style';
import { Avatar } from '../../styles/components/shared/Avatar.style';
import { Flex } from '../../styles/components/shared/Flex.style';
import RichText from '../RichText';
import SocialNetworks from './SocialNetworks';
import PostSEO from './PostSEO';
import { PrismicDocument } from '../../prismic/api';

interface Props {
  post: PrismicDocument<BlogPostData>;
}

class Post extends Component<Props> {
  refContent: RefObject<HTMLDivElement> = createRef();

  public getOffset(): number {
    return this.refContent.current.offsetTop;
  }

  public getHeight(): number {
    return this.refContent.current.offsetHeight;
  }

  render(): React.ReactElement {
    const {
      title,
      description,
      content,
      tag,
      image,
      author,
      read_duration,
      first_related_post,
      second_related_post,
      third_related_post,
      fourth_related_post,
      discover,
      related_video
    } = this.props.post.data;
    const richTextContext = {
      related: [first_related_post, second_related_post, third_related_post, fourth_related_post],
      discover,
      related_video
    };

    return (
      <>
        <PostSEO post={this.props.post} />
        <PostContainer>
          <div>
            <PostImage image={image.url} />
            <div className="article-title">
              <Tag>{tag.data?.name}</Tag>
              <h1>{title}</h1>
            </div>
          </div>
          <div ref={this.refContent}>
            <Flex justifyContent="space-between" alignItems="center">
              <Author>
                <Avatar url={author?.data?.portrait?.url} />
                <div>
                  <p>
                    Écrit par <strong>{author?.data?.full_name}</strong>
                  </p>
                  <span>Temps de lecture : {read_duration} min</span>
                </div>
              </Author>
              <SocialNetworks text={description} />
            </Flex>
            <RichText content={content} Component="article" context={richTextContext} />
            <div className="edging">
              <p>
                <b>Vous avez aimé l'article ?</b> Partagez-le sur les réseaux sociaux !
              </p>
              <SocialNetworks text={description} />
            </div>
          </div>
        </PostContainer>
      </>
    );
  }
}

export default Post;