import { StyleProp, TextStyle } from 'react-native';
import StepIndicator from 'react-native-step-indicator';
import { tw } from '../../core/tailwind';
import { Icon } from './Icon';
import { Text } from './Text';

interface StepperProps {
  labels: string[];
  currentPosition?: number;
  labelStyle?: StyleProp<TextStyle>;
}

const thirdIndicatorstyles = {
  stepIndicatorSize: 15,
  currentStepIndicatorSize: 15,
  separatorStrokeWidth: 2,
  currentStepStrokeWidth: 0,
  stepStrokeCurrentColor: 'transparent',
  stepStrokeWidth: 1,
  stepStrokeFinishedColor: 'transparent',
  stepStrokeUnFinishedColor: '#D9D9D9',
  separatorFinishedColor: tw.color('bg-primary'),
  separatorUnFinishedColor: '#dedede',
  stepIndicatorFinishedColor: tw.color('bg-primary'),
  stepIndicatorUnFinishedColor: tw.color('bg-dark'),
  stepIndicatorCurrentColor: tw.color('bg-primary'),
  stepIndicatorLabelFontSize: 0,
  currentStepIndicatorLabelFontSize: 0,
  stepIndicatorLabelCurrentColor: 'transparent',
  stepIndicatorLabelFinishedColor: 'transparent',
  stepIndicatorLabelUnFinishedColor: 'transparent',
  labelColor: '#999999',
  labelSize: 13,
  currentStepLabelColor: '#7eaec4',
  finishedStepLabelColor: 'red',
};

export function Stepper({ labels, currentPosition, labelStyle }: StepperProps) {
  return (
    <StepIndicator
      customStyles={thirdIndicatorstyles}
      currentPosition={currentPosition || 0}
      stepCount={labels.length}
      labels={labels}
      renderStepIndicator={(p) => {
        if (p.stepStatus === 'finished') {
          return <Icon name="checkmark" color={tw.color('bg-black')} size={10} />;
        }
        return null;
      }}
      renderLabel={(l) => {
        return (
          <Text
            style={[
              tw.style({ 'text-primary': l.stepStatus === 'finished' || l.stepStatus === 'current' }),
              labelStyle,
            ]}
          >
            {l.label}
          </Text>
        );
      }}
    />
  );
}