import FeatherIcon from 'components/icons/Feather'
import Meta from 'components/elements/Meta/Meta'
import Heading from 'components/elements/Heading'
import { Link } from 'components/elements/Link'
import Text from 'components/elements/Text'
import Flex from 'components/elements/Flex'
import Box from 'components/elements/Box'
import Caption from 'components/patterns/Caption/Caption'
import DotsBackground from 'components/patterns/DotsBackground/DotsBackground'
import Layout from 'components/patterns/Layout'
import { formatNumber } from 'helpers/format-number'
import { useOss } from 'components/hook/use-oss'
import { layout, theme } from 'theme'
import React from 'react'
import { Star, AlertCircle } from 'react-feather'

export const Head = () => (
  <Meta
    title='Open Source Software'
    description='It’s our great privilege to build our products using open source software (OSS) and we want to give the same effort back.'
  />
)

const OssPage = () => {
  const repositories = useOss()
  return (
    <DotsBackground>
      <Layout footer={{ style: { background: 'transparent' } }}>
        <Flex
          css={theme({
            flexDirection: 'column',
            alignItems: 'center'
          })}
        >
          <Heading css={{ maxWidth: layout.large }}>
            Open Source Software
          </Heading>

          <Caption
            forwardedAs='h2'
            css={theme({
              pt: 3,
              px: 4,
              maxWidth: layout.small
            })}
          >
            It’s our great privilege to build our products using open source
            software (OSS) and we want to give the same effort back.
          </Caption>

          <Flex
            css={theme({
              pt: [3, null, 4],
              width: '100%',
              maxWidth: layout.normal,
              flexDirection: 'column'
            })}
          >
            {repositories.map(
              ({ name, description, stars, issues, url }, index) => (
                <Box
                  key={name}
                  css={theme({
                    mb: index !== repositories.length - 1 ? 3 : 0,
                    borderBottom: 1,
                    borderColor: 'black05'
                  })}
                >
                  <Link
                    css={theme({ color: 'black' })}
                    href={url}
                    externalIcon={false}
                  >
                    <Text
                      as='h3'
                      css={theme({
                        fontWeight: 'bold',
                        mr: 3,
                        display: 'inline-block',
                        width: '240px'
                      })}
                    >
                      {name}
                    </Text>
                    <Flex css={theme({ color: 'black', float: 'right' })}>
                      <Flex css={theme({ alignItems: 'center', mr: 3 })}>
                        <Text css={theme({ mr: 1 })}>
                          {formatNumber(stars)}
                        </Text>
                        <Flex>
                          <FeatherIcon
                            icon={Star}
                            size={[0, 0, 1, 1]}
                            css={{ display: 'flex', alignItems: 'center' }}
                          />
                        </Flex>
                      </Flex>
                      <Flex css={{ alignItems: 'center' }}>
                        <Text css={theme({ mr: 1 })}>{issues}</Text>
                        <FeatherIcon
                          icon={AlertCircle}
                          size={[0, 0, 1, 1]}
                          css={{ display: 'flex', alignItems: 'center' }}
                        />
                      </Flex>
                    </Flex>
                    <Text
                      css={theme({ color: 'black60', my: 2, width: '80%' })}
                    >
                      {description}
                    </Text>
                  </Link>
                </Box>
              )
            )}
          </Flex>
        </Flex>
      </Layout>
    </DotsBackground>
  )
}

export default OssPage
