import React, { useMemo } from 'react';
// import { Platform, Text, View } from 'react-native';
import { Text, View } from 'react-native';
import { applyStyles, textStyles } from '../../utils/styles';
import { useInheritedFocusedStyle } from '../../context/FocusContext';
import { iconPathsByName } from '../../utils/iconMap';
import { resolveSymbolGlyph } from '../../utils/symbolGlyphs';

let SvgComponent: React.ComponentType<any> | null = null;
let SvgPathComponent: React.ComponentType<any> | null = null;
// if (!Platform.isTV) {
  try {
    const reactNativeSvg = require('react-native-svg');
    SvgComponent = reactNativeSvg.default ?? reactNativeSvg.Svg ?? null;
    SvgPathComponent = reactNativeSvg.Path ?? null;
  } catch {
    SvgComponent = null;
    SvgPathComponent = null;
  }
// }

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

export const NamiSymbol: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
  const isFocused = useInheritedFocusedStyle();
  const containerStyle = applyStyles(component, scaleFactor, isFocused, parentDirection);
  const symbolStyle = textStyles(component, scaleFactor, isFocused);
  const svgPaths = useMemo(() => iconPathsByName(component.name), [component.name]);
  const value = resolveSymbolGlyph(component.name) || (component.text ?? '');
  const iconSize = typeof symbolStyle.fontSize === 'number' ? symbolStyle.fontSize : 16 * scaleFactor;
  const iconColor = typeof symbolStyle.color === 'string' ? symbolStyle.color : '#ffffff';
  const iconMarginTop = typeof symbolStyle.lineHeight === 'number'
    ? symbolStyle.lineHeight / 10
    : iconSize * 0.12;
  const canRenderSvg = Boolean(svgPaths && SvgComponent && SvgPathComponent);
  const resolvedSvgPaths = svgPaths ?? [];

  if (!svgPaths && !value) return null;

  return (
    <View style={containerStyle}>
      {canRenderSvg ? (
        <View style={{ marginTop: iconMarginTop }}>
          {(() => {
            const SafeSvgComponent = SvgComponent as React.ComponentType<any>;
            const SafeSvgPathComponent = SvgPathComponent as React.ComponentType<any>;

            return (
              <SafeSvgComponent width={iconSize} height={iconSize} viewBox="64 64 896 896">
                {resolvedSvgPaths.map((d, index) => (
                  <SafeSvgPathComponent key={`${component.name ?? 'icon'}-${index}`} d={d} fill={iconColor} />
                ))}
              </SafeSvgComponent>
            );
          })()}
        </View>
      ) : (
        <Text style={symbolStyle} allowFontScaling={false}>{value}</Text>
      )}
    </View>
  );
};