import * as React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

function Seo({ description, lang, meta, title, keywords, useChineseTitle }: any) {
  const keywordStr: string = Array.isArray(keywords) ? keywords.join(",") : keywords
  const result = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )

  const { site } = result
  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={useChineseTitle ? `%s | 平凯星辰` : (defaultTitle ? `%s | ${defaultTitle}` : undefined)}
      meta={[
        {
          name: "description",
          content: metaDescription,
        },
        {
          name: "keywords",
          content: keywordStr,
        },
        {
          property: "og:title",
          content: title,
        },
        {
          property: "og:description",
          content: metaDescription,
        },
        {
          property: "og:type",
          content: "website",
        },
        {
          name: "twitter:card",
          content: "summary",
        },
        {
          name: "twitter:creator",
          content: site.siteMetadata?.author || "",
        },
        {
          name: "twitter:title",
          content: title,
        },
        {
          name: "twitter:description",
          content: metaDescription,
        },
        {
          name: "referrer",
          content: "no-referrer-when-downgrade",
        },
      ].concat(meta)}
    />
  )
}

Seo.defaultProps = {
  lang: "en",
  meta: [],
  description: "",
  keywords: [],
}

export default Seo