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

type Variant = 'full-width' | 'card';
type LeadingStatusIntent =
  | 'success'
  | 'warning'
  | 'danger'
  | 'info'
  | 'archived';

const StyledListItemContainer = styled(TouchableHighlight)<{
  themeSelected?: boolean;
  themeVariant?: Variant;
}>(({ theme, themeSelected = false, themeVariant = 'basic' }) => {
  const sharedStyles = {
    flexDirection: 'row' as const,
    backgroundColor: themeSelected
      ? theme.__hd__.list.colors.checkedListItemContainerBackground
      : theme.__hd__.list.colors.listItemContainerBackground,
    padding: theme.__hd__.list.space.listItemContainerPadding,
    borderRadius: theme.__hd__.list.radii.item,
  };

  switch (themeVariant) {
    case 'basic':
      return sharedStyles;
    case 'card':
      return {
        ...sharedStyles,
        alignItems: 'center',
        ...theme.__hd__.list.shadows.card,
      };
    default:
      return sharedStyles;
  }
});

const StyledContentContainer = styled(View)(() => ({
  flexDirection: 'column',
  flex: 1,
  flexGrow: 2,
}));

const StyledChildrenContainer = styled(View)(({ theme }) => ({
  flexDirection: 'column',
  justifyContent: 'flex-start',
  alignItems: 'flex-start',
  marginTop: theme.__hd__.list.space.childrenContainerTopMargin,
}));

const StyledLeadingStatus = styled(View)<{
  themeLeadingStatusIntent: LeadingStatusIntent;
}>(({ theme, themeLeadingStatusIntent }) => ({
  width: theme.__hd__.list.widths.leadingStatus,
  marginRight: theme.__hd__.list.space.leadingStatusMarginRight,
  borderRadius: theme.__hd__.list.radii.leadingStatus,
  backgroundColor:
    theme.__hd__.list.colors.leadingStatus[themeLeadingStatusIntent],
}));

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,
}));

export {
  StyledListItemContainer,
  StyledContentContainer,
  StyledChildrenContainer,
  StyledLeadingStatus,
  StyledPrefixContainer,
  StyledTitleContainer,
  StyledSuffixContainer,
};