import {StyleSheet} from 'react-native';
import {
  IconCheck,
  IconDots,
  IconExclamationCircle,
  IconProgress,
} from '@tabler/icons-react-native';
import {AvatarProps} from '@components/_HuGo/Avatar';
import {NewThemeColors, ThemeColors} from '@shared/theme';

import {TrackerState} from './interfaces';

export const styles = StyleSheet.create({
  container: {alignItems: 'center'},
  line: {
    flexGrow: 1,
    minHeight: 72,
    width: 2,
  },
});

export const getAvatarByState = (
  theme: ThemeColors & NewThemeColors,
  state: TrackerState,
) => {
  const variants: Record<TrackerState, AvatarProps> = {
    complete: {
      Icon: IconCheck,
      variant: 'primary',
      iconColor: theme.text.neutral.brand,
      style: {
        borderWidth: 1,
        borderColor: theme.border.neutral.brand,
      },
    },
    current: {
      Icon: IconProgress,
      variant: 'default',
      style: {
        borderWidth: 1,
        borderColor: theme.graphics.hugo[500],
        backgroundColor: theme.background.layout.tertiary,
      },
    },
    disabled: {
      Icon: IconDots,
      variant: 'default',
      iconColor: theme.text.neutral.disabled,
      style: {backgroundColor: theme.action.background.brand.disabled},
    },
    error: {
      Icon: IconExclamationCircle,
      variant: 'error',
    },
  };
  return variants[state];
};
