import React, { useMemo } from 'react'
import { View } from 'react-native'
import Svg, { Rect } from 'react-native-svg'
import { generateQrMatrix } from '../utils/generateQrMatrix'

const DEFAULT_SIZE = 220

const QrCode = ({
  value,
  size = DEFAULT_SIZE,
  color = '#FFFFFF',
  backgroundColor = 'transparent',
  errorCorrectionLevel = 'M',
}) => {
  const { matrix } = useMemo(() => {
    try {
      return generateQrMatrix({ value, errorCorrectionLevel })
    } catch (error) {
      console.error('qr.code.generate.error', error)
      return { matrix: [] }
    }
  }, [value, errorCorrectionLevel])

  const cellSize = useMemo(() => {
    if (!matrix || !matrix.length) {
      return 0
    }
    return size / matrix.length
  }, [matrix, size])

  return (
    <View
      style={{
        width: size,
        height: size,
        backgroundColor,
      }}
    >
      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        {matrix.map((row, rowIndex) => {
          return row.map((isDark, colIndex) => {
            if (!isDark) {
              return null
            }

            const key = `${rowIndex}-${colIndex}`

            return (
              <Rect
                key={key}
                x={colIndex * cellSize}
                y={rowIndex * cellSize}
                width={cellSize}
                height={cellSize}
                fill={color}
              />
            )
          })
        })}
      </Svg>
    </View>
  )
}

export default QrCode