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

const SectionSpacer = styled(View)(({ theme }) => ({
  marginTop: theme.__hd__.select.space.sectionSpacing,
}));

const OptionSpacer = styled(View)(({ theme }) => ({
  marginTop: theme.__hd__.select.space.optionSpacing,
}));

const StyledSearchBar = styled(View)(({ theme }) => ({
  marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
  paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
  paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing,
}));

const StyledSectionList = styled(SectionList)(({ theme }) => ({
  paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding,
})) as unknown as typeof SectionList;

const getZIndexByState = ({ themeHasError }: { themeHasError: boolean }) => {
  if (themeHasError) {
    return 1;
  }

  return 0;
};

const StyledTouchableOpacity = styled(TouchableOpacity)<{
  themeGroupStyleEnabled: boolean;
  themeHasError: boolean;
}>(({ themeGroupStyleEnabled, themeHasError }) => ({
  ...(themeGroupStyleEnabled && {
    zIndex: getZIndexByState({ themeHasError }),
  }),
}));

export {
  SectionSpacer,
  OptionSpacer,
  StyledSearchBar,
  StyledSectionList,
  StyledTouchableOpacity,
};