import styled from '@emotion/native';
import type { ViewProps } from 'react-native';
import { View } from 'react-native';
import { transformKebabCaseToCamelCase } from '../../../utils/helpers';

type ThemeVariant =
  | 'basic-transparent'
  | 'filled-primary'
  | 'filled-secondary'
  | 'filled-danger'
  | 'filled-white'
  | 'filled-inverted'
  | 'outlined-primary'
  | 'outlined-secondary'
  | 'outlined-danger'
  | 'outlined-white'
  | 'outlined-inverted'
  | 'text-primary'
  | 'text-secondary'
  | 'text-danger'
  | 'text-white'
  | 'text-inverted';

const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>({
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
});

const StyledLoadingDot = styled(View)<{
  size?: number;
  themeVariant: ThemeVariant;
}>(({ size = 12, themeVariant, theme }) => {
  const themeStyling = () => {
    if (themeVariant === 'basic-transparent')
      return { backgroundColor: theme.__hd__.button.colors.invertedText };

    const colorKey = transformKebabCaseToCamelCase(themeVariant);
    return {
      backgroundColor: theme.__hd__.button.colors.text[colorKey],
    };
  };

  return {
    width: size,
    height: size,
    marginHorizontal: theme.space.small,
    borderRadius: theme.space.small,
    ...themeStyling(),
  };
});

export { StyledLoadingDot, StyledLoadingIndicatorWrapper };