import DotsBackground from 'components/patterns/DotsBackground/DotsBackground'
import Faq from 'components/patterns/Faq/Faq'
import { withTitle } from 'helpers/hoc/with-title'
import Caption from 'components/patterns/Caption/Caption'
import Layout from 'components/patterns/Layout'
import { cx, colors, borders, layout, theme } from 'theme'
import FeatherIcon from 'components/icons/Feather'
import { XCircle, CheckCircle } from 'react-feather'
import React from 'react'
import { issueUrl } from 'helpers/issue-url'

import Box from 'components/elements/Box'
import { Button } from 'components/elements/Button/Button'
import Caps from 'components/elements/Caps'
import Flex from 'components/elements/Flex'
import HeadingBase 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 fileFormats from '../../data/formats'

const Heading = withTitle(HeadingBase)
const Subhead = withTitle(SubheadBase)

const [{ score }, formats] = fileFormats

const SPACE = {
  SHORT: '82px',
  MEDIUM: '96px',
  LONG: '128px'
}

const SkipIcon = props => <Text {...props}>-</Text>

const StatusIcon = ({ value }) => {
  const isOptional = value === undefined
  const condition = isOptional ? undefined : false
  const isPresent = value !== condition

  if (isOptional) {
    return (
      <Box css={theme({ pl: 2 })}>
        <SkipIcon size={20} color={cx('gray')} />
      </Box>
    )
  }

  const iconName = isPresent ? CheckCircle : XCircle
  const color = isPresent ? cx('close') : cx('gray')

  return (
    <Box css={theme({ pl: 2 })}>
      <FeatherIcon icon={iconName} color={color} size={[1, 1, 2, 2]} />
    </Box>
  )
}

const HEADER = [
  { children: 'format', style: { minWidth: SPACE.MEDIUM } },
  { children: 'type', style: { minWidth: SPACE.LONG } },
  { children: 'size', style: { minWidth: SPACE.SHORT } },
  { children: 'height', style: { minWidth: SPACE.SHORT } },
  { children: 'width', style: { minWidth: SPACE.SHORT } },
  { children: 'duration', style: { minWidth: SPACE.MEDIUM } },
  { children: 'palette', style: { minWidth: SPACE.MEDIUM } }
]

const FAQs = props => (
  <Faq
    title='FAQs'
    caption='Frequently asked questions.'
    questions={[
      {
        question: 'What is it?',
        answer: (
          <>
            <div>
              It’s a benchmark for measuring{' '}
              <Link href='/docs/api/getting-started/overview'>
                Microlink API
              </Link>{' '}
              capabilities for detecting file URLs when{' '}
              <Link href='/docs/api/parameters/meta'>meta</Link> is enabled
            </div>
          </>
        )
      },
      {
        question: 'Why is it important?',
        answer: (
          <>
            <div>
              The benchmark has two intentions: support as many formats as
              possible, and expand metadata fields properly according to the
              nature of the format.
            </div>
          </>
        )
      },
      {
        question: 'How does it work?',
        answer: (
          <>
            <div>
              There is not only one way, but different techniques are combined
              to resolve the field as fast as possible.
            </div>
            <div>
              These techniques use tools like{' '}
              <Link href='https://ffmpeg.org/'>ffmpeg</Link> or{' '}
              <Link href='https://github.com/Kikobeats/reachable-url'>
                reachable-url
              </Link>
              .
            </div>
          </>
        )
      },
      {
        question: 'Why not run my own solution?',
        answer: (
          <>
            <div>
              You can always run your own solution; Most of our software is{' '}
              <Link href='/open-source'>Open Source</Link>, so you can take them
              and hosted from scratch.
            </div>
            <div>
              What we offer as part of our value proposition is a production
              ready solution without the headaches of running your own
              infrastructure.
            </div>
            <div>
              No code to maintain, no servers to scale up, no dependencies to
              upgrade. Just an always ready{' '}
              <Link href='/docs/api/getting-started/overview'>API</Link> ready
              to use.
            </div>
          </>
        )
      },
      {
        question: 'Other questions?',
        answer: (
          <>
            <div>
              We’re always available at{' '}
              <Link href='mailto:hello@microlink.io'>hello@microlink.io</Link>.
            </div>
          </>
        )
      }
    ]}
    {...props}
  />
)

export const Head = () => (
  <Meta
    title='Formats'
    description='Supported formats by Microlink up to date.'
  />
)

const FormatsPage = () => (
  <DotsBackground>
    <Layout>
      <Flex
        css={theme({
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column'
        })}
      >
        <Heading css={theme({ px: 5, maxWidth: layout.large })}>
          Supported formats
        </Heading>
        <Caption
          css={theme({
            pt: [3, 3, 4, 4],
            px: 4,
            maxWidth: [layout.small, layout.small, layout.small, layout.small]
          })}
        >
          Tested {formats.length} files, {score} resolved
        </Caption>
        <Flex
          css={theme({
            pt: [3, 3, 4, 4],
            flexDirection: 'column',
            maxWidth: '95vw',
            overflowX: 'auto'
          })}
        >
          <Flex as='header'>
            {HEADER.map(({ children, ...props }) => (
              <Text
                key={children}
                css={theme({ fontWeight: 'bold', p: 2 })}
                {...props}
              >
                {children}
              </Text>
            ))}
          </Flex>
          {formats.map(file => {
            return (
              <Flex
                key={file.url}
                css={theme({
                  borderTop: `${borders[1]} ${colors.black05}`,
                  py: 2,
                  _hover: {
                    bg: 'black025',
                    color: 'black'
                  }
                })}
              >
                <Text style={HEADER[0].style} css={theme({ p: 2 })}>
                  <Link href={file.url}>{file.extension}</Link>{' '}
                </Text>
                <Text style={HEADER[1].style} css={theme({ p: 2 })}>
                  {file.type}
                </Text>
                <Flex style={HEADER[2].style} css={theme({ p: 2 })}>
                  <StatusIcon value={file.size} />
                </Flex>
                <Text style={HEADER[3].style} css={theme({ p: 2 })}>
                  <Flex>
                    <StatusIcon value={file.height} />
                  </Flex>
                </Text>
                <Text style={HEADER[4].style} css={theme({ p: 2 })}>
                  <Flex>
                    <StatusIcon value={file.width} />
                  </Flex>
                </Text>
                <Text style={HEADER[5].style} css={theme({ p: 2 })}>
                  <Flex>
                    <StatusIcon value={file.duration} />
                  </Flex>
                </Text>
                <Text style={HEADER[6].style} css={theme({ p: 2 })}>
                  <Flex>
                    <StatusIcon value={file.palette} />
                  </Flex>
                </Text>
              </Flex>
            )
          })}
        </Flex>
        <Flex
          css={theme({
            py: [5, 5, 6, 6],
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: ['column', 'column', 'row', 'row'],
            width: '100%',
            maxWidth: layout.large,
            px: 4
          })}
        >
          <Subhead>Anything else?</Subhead>
          <Box css={theme({ p: [4, 4, 0, 0] })}>
            <Button
              onClick={() =>
                window.open(issueUrl.bug(), '_blank', 'noopener noreferrer')}
            >
              <Caps>Request a format</Caps>
            </Button>
          </Box>
        </Flex>
      </Flex>
      <FAQs
        css={theme({
          pb: [5, 5, 6, 6],
          bg: 'pinky',
          borderTop: `${borders[1]} ${colors.pinkest}`,
          borderBottom: `${borders[1]} ${colors.pinkest}`
        })}
      />
    </Layout>
  </DotsBackground>
)

export default FormatsPage
