import styled from '@emotion/native';
import Box from '../Box';

type StepState = 'complete' | 'incomplete' | 'current';

const StyledStepContainer = styled(Box)({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
});

const StyledStep = styled(Box)<{
  themeState: StepState;
  themeWidth: number;
}>(({ theme, themeState, themeWidth }) => ({
  height: theme.__hd__.progress.sizes.stepHeight,
  borderRadius: theme.__hd__.progress.radii.default,
  backgroundColor: theme.__hd__.progress.colors.step[themeState],
  width: themeWidth,
}));

const StyledSingleStepContainer = styled(Box)(({ theme }) => ({
  height: theme.__hd__.progress.sizes.stepHeight,
  borderRadius: theme.__hd__.progress.radii.default,
  backgroundColor: theme.__hd__.progress.colors.step.incomplete,
  width: '100%',
  position: 'relative',
}));

const StyledSingleStep = styled(Box)<{ themeState: 'complete' | 'incomplete' }>(
  ({ theme, themeState }) => ({
    height: theme.__hd__.progress.sizes.stepHeight,
    borderRadius: theme.__hd__.progress.radii.default,
    backgroundColor: theme.__hd__.progress.colors.step.complete,
    width: themeState === 'complete' ? '100%' : '70%',
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  })
);

export {
  StyledStepContainer,
  StyledStep,
  StyledSingleStepContainer,
  StyledSingleStep,
};