/**
Copyright 2021 Forestry.io Holdings, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React from "react";
import { Container } from "../util/container";
import { Section } from "../util/section";
import format from "date-fns/format";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import { PostType } from "../../pages/posts/[filename]";
import { tinaField } from "tinacms/dist/react";
import richTextComponents from "../rich-text/rich-text-definitions";

export const Post = (props: PostType) => {
    const date = new Date(props.date);
    let formattedDate = "";
    if (!isNaN(date.getTime())) {
        formattedDate = format(date, "MMM dd, yyyy");
    }

    return (
        <Section className="flex-1">
            <Container width="small" className={ "flex-1 pb-2" } size="large">
                <h2
                    data-tina-field={ tinaField(props, "title") }
                    className={ "w-full relative	mb-8 text-6xl font-extrabold tracking-normal text-center title-font" }
                >
                    <span
                        className={ "bg-clip-text text-transparent bg-gradient-to-r" }
                    >
                        { props.title }
                    </span>
                </h2>
                <div
                    data-tina-field={ tinaField(props, "author") }
                    className="flex items-center justify-center mb-16"
                >
                    { props.author && (
                        <>
                            <div className="flex-shrink-0 mr-4">
                                <img
                                    data-tina-field={ tinaField(props.author, "avatar") }
                                    className="h-14 w-14 object-cover rounded-full shadow-sm"
                                    src={ props.author.avatar }
                                    alt={ props.author.name }
                                />
                            </div>
                            <p
                                data-tina-field={ tinaField(props.author, "name") }
                                className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white"
                            >
                                { props.author.name }
                            </p>
                            <span className="font-bold text-gray-200 dark:text-gray-500 mx-2">
                —
                            </span>
                        </>
                    ) }
                    <p
                        data-tina-field={ tinaField(props, "date") }
                        className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150"
                    >
                        { formattedDate }
                    </p>
                </div>
            </Container>
            { props.heroImg && (
                <div className="px-4 w-full">
                    <div
                        data-tina-field={ tinaField(props, "heroImg") }
                        className="relative max-w-4xl lg:max-w-5xl mx-auto"
                    >
                        <img
                            src={ props.heroImg }
                            className="absolute block rounded-lg w-full h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
                            aria-hidden="true"
                        />
                        <img
                            src={ props.heroImg }
                            alt={ props.title }
                            className="relative z-10 mb-14 block rounded-lg w-full h-auto opacity-100"
                        />
                    </div>
                </div>
            ) }
            <Container className={ "flex-1 pt-4" } width="small" size="large">
                <div
                    data-tina-field={ tinaField(props, "_body") }
                    className="prose dark:prose-dark w-full max-w-none"
                >
                    <TinaMarkdown components={ richTextComponents } content={ props._body } />
                </div>
            </Container>
        </Section>
    );
};
