import Choose from 'components/elements/Choose'
import Flex from 'components/elements/Flex'
import Heading from 'components/elements/Heading'
import Text from 'components/elements/Text'
import Box from 'components/elements/Box'
import { PostFooter } from 'components/pages/blog/post-footer'
import { PostTitle } from 'components/pages/blog/post-title'
import { PostAuthor } from 'components/pages/blog/post-author'
import { useMounted } from 'components/hook/use-mounted'
import Layout from 'components/patterns/Layout'
import Markdown, { H1, H2 } from 'components/markdown'
import { textGradient, layout, theme } from 'theme'
import { formatDate } from 'helpers/format-date'
import { title as titleize } from 'helpers/title'
import TimeAgo from 'react-timeago'
import React from 'react'

const PageTemplate = ({
  isBlogPage,
  date,
  title,
  subtitle,
  authors,
  content,
  lastEdited
}) => {
  const mounted = useMounted()
  const authorList = Array.isArray(authors) ? authors : []
  return (
    <Layout>
      <Text
        as='header'
        css={theme({
          textAlign: 'center',
          maxWidth: layout.normal,
          mx: 'auto'
        })}
      >
        <Flex
          css={{
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <Choose>
            <Choose.When condition={isBlogPage}>
              <H1
                css={theme({
                  ...textGradient,
                  textAlign: 'center',
                  mt: 0,
                  mb: subtitle ? 3 : undefined
                })}
              >
                <PostTitle>{title}</PostTitle>
              </H1>
              {subtitle && (
                <H2
                  css={theme({
                    textAlign: 'center',
                    mt: 0
                  })}
                >
                  <PostTitle>{titleize(subtitle)}</PostTitle>
                </H2>
              )}
              <PostAuthor authorIds={authorList} />
              <Text
                as='p'
                css={theme({
                  color: 'black60'
                })}
              >
                {formatDate(date)}
                {mounted && (
                  <>
                    {' '}
                    (<TimeAgo date={date} />)
                  </>
                )}
              </Text>
            </Choose.When>
            <Choose.Otherwise>
              <Heading css={{ marginTop: 0, maxWidth: layout.large }}>
                {title}
              </Heading>
              {lastEdited && (
                <Text as='p' css={theme({ pt: 4, color: 'black60' })}>
                  Last updated on {formatDate(lastEdited)}
                </Text>
              )}
            </Choose.Otherwise>
          </Choose>
        </Flex>
      </Text>

      <Box css={theme({ pt: [3, null, 4] })}>
        <Markdown isBlogPage>{content}</Markdown>
      </Box>

      {isBlogPage && (
        <Markdown isBlogPage={isBlogPage}>
          <PostFooter />
        </Markdown>
      )}
    </Layout>
  )
}

export default PageTemplate
