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

const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
  height: theme.__hd__.timePicker.sizes.height,
  alignItems: 'center',
}));

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 { StyledPickerWrapper, StyledTouchableOpacity };