import styled from '@emotion/native';
import { TouchableHighlight, View } from 'react-native';

const StyledPrefixContainer = styled(View)(({ theme }) => ({
  marginRight: theme.__hd__.list.space.prefixContainerMarginRight,
}));
const StyledSuffixContainer = styled(View)(({ theme }) => ({
  marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft,
}));
const StyledTitleContainer = styled(View)(() => ({
  flex: 1,
}));

const StyledListItemContainer = styled(TouchableHighlight)<{
  themeSelected?: boolean;
  themeDisabled?: boolean;
}>(({ theme, themeSelected, themeDisabled }) => ({
  alignItems: 'center',
  flexDirection: 'row',
  backgroundColor: themeSelected
    ? theme.__hd__.list.colors.checkedListItemContainerBackground
    : theme.__hd__.list.colors.listItemContainerBackground,
  padding: theme.__hd__.list.space.listItemContainerPadding,
  opacity: themeDisabled
    ? theme.__hd__.list.opacity.disabled
    : theme.__hd__.list.opacity.enabled,
  borderRadius: theme.__hd__.list.radii.basicItem,
}));
export {
  StyledListItemContainer,
  StyledPrefixContainer,
  StyledTitleContainer,
  StyledSuffixContainer,
};