import React, { useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { LIQUID_VARIABLE_REGEX } from '@namiml/sdk-core';
import QRCode from 'react-native-qrcode-svg';

import { applyStyles, parseColor, parseSize } from '../../utils/styles';

interface Props {
  component: any;
  scaleFactor: number;
  parentDirection?: string;
}

export const NamiQRCode: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
  const containerStyle = useMemo(
    () => applyStyles(component, scaleFactor, false, parentDirection),
    [component, scaleFactor, parentDirection]
  );

  const borderWidth = parseSize(component.borderWidth ?? 0, scaleFactor) ?? 0;
  const width = parseSize(component.width, scaleFactor) ?? 360;
  const size = Math.max(1, Math.floor(width - borderWidth * 2));
  const outerSize = Math.max(1, Math.floor(width));
  const value = component.url ?? '';
  const hasResolvedValue = typeof value === 'string'
    ? value.trim().length > 0 && !value.match(LIQUID_VARIABLE_REGEX)
    : Boolean(value);
  const color = parseColor(component.color) ?? '#000000';
  const backgroundColor = parseColor(component.fillColor ?? component.borderColor) ?? 'transparent';

  if (!hasResolvedValue) {
    return (
      <View style={[containerStyle, styles.fallback, { width: outerSize, height: outerSize, backgroundColor }]} />
    );
  }

  return (
    <View style={[containerStyle, { backgroundColor, width: outerSize, height: outerSize }]}>
      <QRCode value={String(value)} size={size} color={color} backgroundColor={backgroundColor} />
    </View>
  );
};

const styles = StyleSheet.create({
  fallback: {
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#000',
  },
});