import React from "react"
import merge from "lodash/merge"
import moment from "moment"
import metadataParser from "markdown-yaml-metadata-parser"

import { Container, Layout } from "@/components"
import Markdown from "@/components/markdown"
import Seo from "@/components/seo"
import BlogHeader from "./blog-header"
import * as styles from "./blog-detail.module.scss"
import t from "@/constants/wording"
import { RETURN_BUTTON_KEY } from "@/constants/common"
import ReturnButton from "@/components/return-button"
import MarkdownCatalogue from "@/components/markdown-catalogue";
import DetailCard from "@/components/detail/detail-card";
import cls from "classnames";
import {Link} from "gatsby";
import BlogRelatedCard from "@/components/blog/blog-related"

type IProps = {
  pageContext: {
    blog: Blog
  }
}

const Blog: React.FC<IProps> = ({ pageContext }) => {
  const { blog } = pageContext
  const isWriteDirectly = blog.fillInMethod === "writeDirectly"
  const { metadata = {}, content = "" } = !isWriteDirectly
    ? metadataParser(blog.file.localFile.internal?.content)
    : {}
  const result = merge(
    { ...blog },
    !isWriteDirectly && {
      ...metadata,
      body: content,
      author: metadata.author?.join(" "),
    }
  )

  const seoProps = {
    title: result.title,
    description: result.summary,
    keywords: result.tags?.join(",") || t("keywords")
  }

  //console.debug({ blog })

  return (
    <Layout>
      <Seo {...seoProps} />
      <BlogHeader needReturn>
        <div className={styles.wrapper}>
          <h1 className={styles.h1}>{result.title}</h1>
          <ReturnButton pageKey={RETURN_BUTTON_KEY.BLOG} />
        </div>
      </BlogHeader>
      <div className={styles.container}>
        <Container className={styles.customContainer}>
          <div className={styles.row}>
            <span>{result.author}</span>
            {result.category && <span><Link to={`/blog/categories/${result.category.name}`}>{result.category.name}</Link></span>}
            <span>{moment(result.date).format("YYYY-MM-DD")}</span>
          </div>
          <div className="columns">
            <div className="column is-8 px-4">
              <Markdown body={result.body} />
            </div>
            <div className={cls("column is-4 px-4", styles.cardsColumns)}>
              <DetailCard header={t("catalogue")} className={styles.catalogue}>
                <MarkdownCatalogue body={result.body} />
              </DetailCard>
            </div>
          </div>
          <div className={styles.tag}>
            {result.tags.map((value: string) => <Link key={value} to={`/blog/?tag=${value}`} className={styles.tag_item}>{value}</Link>)}
          </div>
        </Container>
      </div>
      <BlogRelatedCard list={blog.relatedBlogs.map(({ relatedBlog }) => relatedBlog)}/>
    </Layout>
  )
}

export default Blog