import { View } from 'react-native';
import styled from '@emotion/native';
import List from '../List';

type RadioIntent = 'light' | 'dark';

const Circle = styled(View)(({ theme }) => ({
  height: theme.__hd__.radio.sizes.circle,
  width: theme.__hd__.radio.sizes.circle,
  borderRadius: theme.radii.rounded,
  borderWidth: theme.__hd__.radio.borderWidths.circle,
  borderColor: theme.__hd__.radio.colors.circle,
  alignItems: 'center',
  justifyContent: 'center',
}));

const InnerCircle = styled(View)(({ theme }) => ({
  height: theme.__hd__.radio.sizes.innerCircle,
  width: theme.__hd__.radio.sizes.innerCircle,
  borderRadius: theme.radii.rounded,
  backgroundColor: theme.__hd__.radio.colors.circle,
}));

const Spacer = styled(View)<{ themeIntent: RadioIntent }>(
  ({ theme, themeIntent }) => ({
    marginTop:
      themeIntent === 'light'
        ? theme.__hd__.radio.space.groupTopMarginSmall
        : theme.__hd__.radio.space.groupTopMarginMedium,
  })
);

const StyledRadio = styled(List.Item)<{
  themeIntent: RadioIntent;
  themeChecked: boolean;
}>(({ theme, themeIntent, themeChecked }) => ({
  backgroundColor: themeChecked
    ? theme.__hd__.radio.colors.checked
    : theme.__hd__.radio.colors.intents[themeIntent],
}));

export { Circle, InnerCircle, Spacer, StyledRadio };