import React, { useMemo } from 'react';
import { View, StyleSheet, ImageBackground } from 'react-native';
import { usePaywallContext } from '../../context/PaywallContext';
import { applyStyles, childSpacingStyle, resolveFillImageUrl } from '../../utils/styles';
import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
import { TemplateRenderer } from '../TemplateRenderer';
import type { TComponent } from '@namiml/sdk-core';
import { parseToSemver } from '@namiml/sdk-core';

interface Props {
  component: any;
  scaleFactor: number;
  onClose?: () => void;
  parentDirection?: string;
}

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

  const minSdk = parseToSemver(ctx.state.selectedPaywall?.template?.min_sdk_version ?? '0.0.0');
  const shouldSizeChildren = minSdk.minor < 2;
  const sizeKey = component.direction === 'vertical' ? 'width' : 'height';
  const direction = component.direction ?? 'vertical';

  const fillImageUrl = resolveFillImageUrl(component.fillImage)
    ? (() => {
      const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, component?.sku);
      const raw = resolveFillImageUrl(component.fillImage) as string;
      const resolved = interpolateSmartText(raw, replacements);
      return resolved == null ? undefined : String(resolved);
    })()
    : undefined;

  const textLike = new Set(['text', 'text-list', 'symbol', 'title', 'body', 'legal']);

  return (
    <View style={[containerStyle, styles.stack]}>
      {fillImageUrl ? (
        <ImageBackground
          source={{ uri: fillImageUrl }}
          resizeMode="cover"
          style={StyleSheet.absoluteFill}
        />
      ) : null}
      {component.components?.map((child: TComponent, i: number) => {
        const isTextLike = textLike.has(child.component);
        const sizeStyle = shouldSizeChildren ? { [sizeKey]: '100%' as const } : {};
        const spacingStyle = childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor);
        const wrapperStyle = [
          isTextLike ? styles.base : styles.overlay,
          sizeStyle,
          spacingStyle,
        ];
        return (
          <View key={child.id ?? i} style={wrapperStyle}>
            <TemplateRenderer component={child} scaleFactor={scaleFactor} onClose={onClose} parentDirection={direction} />
          </View>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  stack: { alignItems: 'center', justifyContent: 'center' },
  base: {},
  overlay: { position: 'absolute', alignSelf: 'center' },
});