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;