import React from 'react';
import Head from 'next/head';
import PrismicRichText from 'prismic-richtext';
import { renderOpengraph } from '../SEO';
import { JsonLd } from 'react-schemaorg';
import { BlogPosting } from 'schema-dts';
import { BlogPostData } from '../../typings/entities';
import { useRouter } from 'next/router';
import { PrismicDocument } from '../../prismic/api';
import moment from 'moment';

interface Props {
  post: PrismicDocument<BlogPostData>;
}

const PostSEO: React.FC<Props> = ({ post }) => {
  const {
    title,
    description,
    content,
    tag,
    image,
    author
  } = post.data;
  const router = useRouter();
  const plainContent = PrismicRichText.asText(content);
  return (
    <Head>
      <title key="title">{title}</title>
      <meta name="description" key="description" content={description} />
      {renderOpengraph({ og_title: title, og_description: description, og_image: image, description })}

      <JsonLd<BlogPosting>
        item={{
          '@context': 'https://schema.org',
          '@type': 'BlogPosting',
          headline: title,
          image: image.url,
          editor: 'Easyblue',
          genre: tag?.data?.title,
          wordCount: plainContent.split(' ').length,
          publisher: {
            '@type': 'Organization',
            name: 'Easyblue',
            logo: {
              '@type': 'ImageObject',
              name: 'EasyblueLogo',
              url: `${process.env.MARKETING_DOMAIN}/static/easyblue-rasterized-logo.png`,
              width: {
                '@type': 'QuantitativeValue',
                unitCode: 'E37',
                value: 696
              },
              height: {
                '@type': 'QuantitativeValue',
                unitCode: 'E37',
                value: 156
              }
            }
          },
          url: `${process.env.MARKETING_DOMAIN}${router.asPath}`,
          datePublished: moment(post.first_publication_date).format('YYYY-MM-DD'),
          dateCreated: moment(post.first_publication_date).format('YYYY-MM-DD'),
          dateModified: moment(post.last_publication_date).format('YYYY-MM-DD'),
          description: description,
          articleBody: plainContent,
          author: {
            '@type': 'Person',
            name: author.data.full_name
          },
          mainEntityOfPage: {
            '@type': 'WebPage',
            url: `${process.env.MARKETING_DOMAIN}${router.asPath}`
          }
        }}
      />
    </Head>
  );
};

export default PostSEO;