import { forwardRef } from 'react';
import { View, type ViewProps } from 'react-native';
import { ProgressBarRoot, ProgressBarIndicator, type IProgressProps } from '@cdx-ui/primitives';
import { cn } from '@cdx-ui/utils';
import {
  progressBarIndicatorVariants,
  progressBarTrackVariants,
  type ProgressBarTrackVariantProps,
} from './styles';

export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
  readonly className?: string;
}

export interface ProgressBarIndicatorProps extends ViewProps {
  readonly className?: string;
}

const ProgressBarRootComponent = forwardRef<View, ProgressBarProps>(
  ({ className, style, ...props }, ref) => {
    const trackClass = cn(progressBarTrackVariants(), className);

    return <ProgressBarRoot ref={ref} className={trackClass} style={style} {...props} />;
  },
);

ProgressBarRootComponent.displayName = 'ProgressBar';

const ProgressBarIndicatorComponent = forwardRef<View, ProgressBarIndicatorProps>(
  ({ className, style, ...props }, ref) => (
    <ProgressBarIndicator
      ref={ref}
      className={cn(progressBarIndicatorVariants(), className)}
      style={style}
      {...props}
    />
  ),
);

ProgressBarIndicatorComponent.displayName = 'ProgressBar.Indicator';

type ProgressBarCompoundComponent = typeof ProgressBarRootComponent & {
  Indicator: typeof ProgressBarIndicatorComponent;
};

export const ProgressBar = Object.assign(ProgressBarRootComponent, {
  Indicator: ProgressBarIndicatorComponent,
}) as ProgressBarCompoundComponent;