import { space, layout, toPx, toRaw, theme } from 'theme'
import DotsBackground from 'components/patterns/DotsBackground/DotsBackground'
import Layout from 'components/patterns/Layout'
import { withTitle } from 'helpers/hoc/with-title'
import Caption from 'components/patterns/Caption/Caption'
import { formatNumber } from 'helpers/format-number'
import React, { useState, useEffect } from 'react'
import { issueUrl } from 'helpers/issue-url'
import kebabCase from 'lodash/kebabCase'
import FeatherIcon from 'components/icons/Feather'
import { getDomain } from 'tldts'
import { Eye } from 'react-feather'

import { Logo } from 'components/pages/recipes'

import Box from 'components/elements/Box'
import { Button } from 'components/elements/Button/Button'
import Caps from 'components/elements/Caps'
import Card from 'components/elements/Card/Card'
import Flex from 'components/elements/Flex'
import Heading from 'components/elements/Heading'
import { Link } from 'components/elements/Link'
import Meta from 'components/elements/Meta/Meta'
import SubheadBase from 'components/elements/Subhead'
import Text from 'components/elements/Text'

import recipes from '../../data/recipes.json'

const Subhead = withTitle(SubheadBase)

const allRecipesKeys = recipes.map(([key]) => key)

const CARD_WIDTH = 300
const CARDS_PER_ROW = 3

const width = [...Array(4).keys()].map(() => CARD_WIDTH)

const maxWidth = width.map(w => toPx(toRaw(space[3]) * 4 + w * CARDS_PER_ROW))

export const Head = () => (
  <Meta description='Just start with code. Instant integration, automating any site in a few lines.' />
)

const RecipesPage = () => {
  const [counters, setCounters] = useState()
  const isLoaded = counters !== undefined

  useEffect(() => {
    window
      .fetch(`https://count.vercel.app/recipes/${allRecipesKeys.join(',')}`)
      .then(response => response.json())
      .then(setCounters)
      .catch(() => undefined)
  }, [])

  return (
    <DotsBackground>
      <Layout footer={{ style: { background: 'transparent' } }}>
        <Flex
          css={theme({
            flexDirection: 'column',
            alignItems: 'center'
          })}
        >
          <Flex
            css={{
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <Heading css={{ maxWidth: layout.large }}>Recipes</Heading>
            <Caption
              forwardedAs='h2'
              css={theme({
                py: [3, null, 4],
                px: [4, null, 0],
                maxWidth: layout.small
              })}
            >
              Just start with code — Instant integration, automating any site in
              a few lines.
            </Caption>
          </Flex>
          <Flex
            css={theme({
              pt: [3, null, 4],
              maxWidth,
              justifyContent: 'center',
              flexWrap: 'wrap'
            })}
          >
            {recipes.map(([recipeName, meta], index) => {
              const count = isLoaded && counters[index]
              const isProvider = meta.type === 'provider'
              const url = isProvider && meta.examples[0]
              const domain = url ? getDomain(url) : 'microlink.io'
              const description = isProvider
                ? `Interact with ${domain}`
                : meta.description

              return (
                <Card
                  key={recipeName}
                  css={theme({
                    flexDirection: 'column',
                    p: 3,
                    width,
                    height: 'inherit',
                    mb: 3,
                    mr: [0, 3],
                    color: 'black',
                    _hover: {
                      color: 'black'
                    }
                  })}
                >
                  <Link
                    css={theme({
                      color: 'inherit',
                      _hover: { color: 'inherit' }
                    })}
                    href={`/recipes/${kebabCase(recipeName)}`}
                  >
                    <Flex css={{ alignItems: 'center' }}>
                      <Box css={theme({ pr: 2 })}>
                        <Logo
                          isProvider={isProvider}
                          domain={domain}
                          {...meta}
                        />
                      </Box>
                      <Text css={theme({ fontSize: 1, fontWeight: 'bold' })}>
                        {meta.name}
                      </Text>
                    </Flex>
                    <Flex>
                      <Text
                        css={theme({
                          mt: 3,
                          fontSize: 0,
                          minHeight: '56px'
                        })}
                      >
                        {description}
                      </Text>
                    </Flex>
                    <Flex
                      css={{ alignItems: 'center' }}
                      style={{ visibility: isLoaded ? 'inherit' : 'hidden' }}
                    >
                      <FeatherIcon
                        icon={Eye}
                        color='black50'
                        size={[0, 0, 1, 1]}
                      />
                      <Text
                        css={theme({ pl: 1, color: 'black50', fontSize: 0 })}
                      >
                        {formatNumber(count)}
                      </Text>
                    </Flex>
                  </Link>
                </Card>
              )
            })}
          </Flex>
          <Flex
            css={theme({
              pt: [5, null, 6],
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: ['column', null, 'row'],
              width: '100%',
              maxWidth: layout.large
            })}
          >
            <Subhead>Miss something?</Subhead>
            <Box css={theme({ pt: [4, null, 0] })}>
              <Button
                onClick={() =>
                  window.open(issueUrl.bug(), '_blank', 'noopener noreferrer')}
              >
                <Caps>Request an Integration</Caps>
              </Button>
            </Box>
          </Flex>
        </Flex>
      </Layout>
    </DotsBackground>
  )
}

export default RecipesPage
