import { Animated, View } from 'react-native';
import styled from '@emotion/native';
import type { ViewProps } from 'react-native';
import type { ThemeIntent } from './types';
import { THEME_INTENT_MAP } from './constants';
import { hexToRgba } from '../../utils/helpers';

const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
  ({ theme, themeIntent }) => ({
    height: theme.__hd__.progress.sizes.barHeight,
    alignSelf: 'stretch',
    backgroundColor: hexToRgba(
      theme.__hd__.progress.colors.incompleteness[
        THEME_INTENT_MAP[themeIntent]
      ],
      0.1
    ),
    overflow: 'hidden',
    borderRadius: theme.__hd__.progress.radii.default,
  })
);

const StyledInner = styled(Animated.View)<{ themeIntent: ThemeIntent }>(
  ({ theme, themeIntent }) => ({
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor:
      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
  })
);

export { StyledWrapper, StyledInner };