import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { applyStyles, parseColor, parseSize } from '../../utils/styles';
// `getCurrentFlowProgress` is a class static, not on the narrow public proxy.
import { _internal } from '@namiml/sdk-core';
const { NamiFlowManager } = _internal;

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

export const NamiProgressIndicator: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
  const innerPadding = parseSize(component.innerPadding ?? 0, scaleFactor) ?? 0;
  const trackColor = parseColor(component.inactiveFillColor ?? component.inactiveFillColorFallback) ?? '#E0E0E0';
  const fillColor = parseColor(component.activeFillColor ?? component.activeFillColorFallback ?? component.fillColor) ?? '#007AFF';
  const barHeight = parseSize(component.height ?? component.indicatorSize ?? 4, scaleFactor) ?? 4;
  const inactiveRadius = parseSize(component.inactiveBorderRadius ?? component.borderRadius, scaleFactor) ?? barHeight / 2;
  const activeRadius = parseSize(component.activeBorderRadius ?? component.borderRadius, scaleFactor) ?? barHeight / 2;

  const [percent, setPercent] = useState<number>(0);

  useEffect(() => {
    let target = component.percentage ?? 0;
    if (target === 'auto') {
      target = NamiFlowManager.getCurrentFlowProgress(component.id) * 100;
    }
    const value = typeof target === 'number'
      ? (target <= 1 && !Number.isInteger(target) ? target * 100 : target)
      : 0;
    setPercent(Math.min(100, Math.max(0, value)));
  }, [component, component.percentage]);

  return (
    <View style={containerStyle}>
      <View style={{ backgroundColor: trackColor, height: barHeight, borderRadius: inactiveRadius, padding: innerPadding }}>
        <View style={{ backgroundColor: fillColor, height: '100%', width: `${percent}%`, borderRadius: activeRadius }} />
      </View>
    </View>
  );
};