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

const StyledView = styled(View)<ViewProps>();

const StyledSpinnerContainer = styled(View)<ViewProps>({
  height: '100%',
  justifyContent: 'center',
  alignItems: 'center',
});

const StyledSpinnerRow = styled(View)<{
  themePosition: 'top' | 'bottom';
  themeSize: 'small' | 'medium';
}>(({ themePosition, themeSize = 'medium', theme }) => ({
  flexDirection: 'row',
  marginBottom:
    themePosition === 'top'
      ? theme.__hd__.spinner.space.spinnerDotPadding[themeSize]
      : 0,
}));

const StyledSpinnerDot = styled(View)<{
  themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
  themeSize: 'small' | 'medium';
  themeIntent: 'primary' | 'inverted';
}>(({ themePosition, themeSize, themeIntent, theme }) => {
  const themeStyling = () => {
    const backgroundColor = theme.__hd__.spinner.colors.dot[themeIntent];
    const dotPadding = theme.__hd__.spinner.space.spinnerDotPadding[themeSize];

    switch (themePosition) {
      case 'topLeft':
        return {
          backgroundColor,
          opacity: 0.9,
        };
      case 'topRight':
        return {
          marginLeft: dotPadding,
          backgroundColor,
          opacity: 0.675,
        };
      case 'bottomLeft':
        return {
          backgroundColor,
          opacity: 0.45,
        };
      case 'bottomRight':
        return {
          marginLeft: dotPadding,
          backgroundColor,
          opacity: 0.225,
        };
    }
  };

  return {
    height: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
    width: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
    borderRadius: theme.__hd__.spinner.radii.default,
    ...themeStyling(),
  };
});

export {
  StyledView,
  StyledSpinnerContainer,
  StyledSpinnerRow,
  StyledSpinnerDot,
};