import React, { useState } from 'react';
import { View, StyleSheet, type LayoutChangeEvent, type ViewStyle } from 'react-native';
import { gradientLine, parseColor, parseLinearGradient, pickOverlayFallbackColor } from '../../utils/styles';

// react-native-svg may be missing on some runtimes (e.g. VegaOS); fall back to a solid color.
let SvgComponent: React.ComponentType<any> | null = null;
let DefsComponent: React.ComponentType<any> | null = null;
let LinearGradientComponent: React.ComponentType<any> | null = null;
let StopComponent: React.ComponentType<any> | null = null;
let RectComponent: React.ComponentType<any> | null = null;
try {
  // eslint-disable-next-line @typescript-eslint/no-require-imports
  const svg = require('react-native-svg');
  SvgComponent = svg.default ?? svg.Svg ?? null;
  DefsComponent = svg.Defs ?? null;
  LinearGradientComponent = svg.LinearGradient ?? null;
  StopComponent = svg.Stop ?? null;
  RectComponent = svg.Rect ?? null;
} catch {
  SvgComponent = null;
}

const RADIUS_KEYS = [
  'borderRadius',
  'borderTopLeftRadius',
  'borderTopRightRadius',
  'borderBottomLeftRadius',
  'borderBottomRightRadius',
] as const;

interface Props {
  color: string;
  radiusStyle: ViewStyle;
}

// NAM-3538: scrim painted above the background container's children, below the page content.
export const BackgroundOverlay: React.FC<Props> = ({ color, radiusStyle }) => {
  const [size, setSize] = useState({ w: 0, h: 0 });

  const radii: Record<string, unknown> = {};
  RADIUS_KEYS.forEach((key) => {
    if (radiusStyle[key] !== undefined) radii[key] = radiusStyle[key];
  });
  const base = [styles.overlay, radii as ViewStyle];

  const solid = parseColor(color);
  if (solid) {
    return <View pointerEvents='none' style={[...base, { backgroundColor: solid }]} />;
  }

  const spec = parseLinearGradient(color);
  if (!spec) return null;

  const canRenderSvg = Boolean(
    SvgComponent && DefsComponent && LinearGradientComponent && StopComponent && RectComponent,
  );
  if (!canRenderSvg) {
    return <View pointerEvents='none' style={[...base, { backgroundColor: pickOverlayFallbackColor(spec) }]} />;
  }

  const Svg = SvgComponent as React.ComponentType<any>;
  const Defs = DefsComponent as React.ComponentType<any>;
  const Gradient = LinearGradientComponent as React.ComponentType<any>;
  const Stop = StopComponent as React.ComponentType<any>;
  const Rect = RectComponent as React.ComponentType<any>;
  const onLayout = (e: LayoutChangeEvent) => {
    const { width, height } = e.nativeEvent.layout;
    setSize((prev) => (prev.w === width && prev.h === height ? prev : { w: width, h: height }));
  };

  return (
    <View pointerEvents='none' style={base} onLayout={onLayout}>
      {size.w > 0 && size.h > 0 ? (
        <Svg width={size.w} height={size.h}>
          <Defs>
            <Gradient id='namiOverlay' gradientUnits='userSpaceOnUse' {...gradientLine(spec.angle, size.w, size.h)}>
              {spec.stops.map((stop, i) => (
                <Stop key={i} offset={stop.offset} stopColor={stop.color} />
              ))}
            </Gradient>
          </Defs>
          <Rect width={size.w} height={size.h} fill='url(#namiOverlay)' />
        </Svg>
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    overflow: 'hidden',
  },
});