1import * as React from 'react'
2import {Box} from './box'
3import * as Styles from '../styles'
4
5const long = 22
6const small = 4
7const padding = 5
8
9const BadLines = () => null
10
11// Note: duplicating the lines here vs a series of maps / permutations so its more readable
12const GoodLines = ({color}: {color: Styles.Color}) => {
13  const s = [styles.common, {backgroundColor: color}]
14  return (
15    <>
16      <Box style={Styles.collapseStyles([...s, {height: long, left: padding, top: padding, width: small}])} />
17      <Box style={Styles.collapseStyles([...s, {height: small, left: padding, top: padding, width: long}])} />
18      <Box
19        style={Styles.collapseStyles([...s, {height: long, right: padding, top: padding, width: small}])}
20      />
21      <Box
22        style={Styles.collapseStyles([...s, {height: small, right: padding, top: padding, width: long}])}
23      />
24      <Box
25        style={Styles.collapseStyles([...s, {bottom: padding, height: long, left: padding, width: small}])}
26      />
27      <Box
28        style={Styles.collapseStyles([...s, {bottom: padding, height: small, left: padding, width: long}])}
29      />
30      <Box
31        style={Styles.collapseStyles([...s, {bottom: padding, height: long, right: padding, width: small}])}
32      />
33      <Box
34        style={Styles.collapseStyles([...s, {bottom: padding, height: small, right: padding, width: long}])}
35      />
36    </>
37  )
38}
39
40const QRScanLines = ({canScan, color}: {canScan: boolean; color?: Styles.Color}) =>
41  canScan ? <GoodLines color={color || Styles.globalColors.blue} /> : <BadLines />
42
43const styles = Styles.styleSheetCreate(() => ({
44  common: {position: 'absolute'},
45}))
46
47export default QRScanLines
48