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

const TabContainer = styled(View)({
  flex: 1,
  overflow: 'hidden',
});

const HeaderTabWrapper = styled(View)<{
  themeInsets: { top: number; right: number; bottom: number; left: number };
}>(({ theme, themeInsets }) => ({
  paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
  borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
  borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
  backgroundColor: theme.__hd__.tabs.colors.headerBackground,
}));

const HeaderTab = styled(View)({
  flexDirection: 'row',
});

const HeaderTabItem = styled(View)(({ theme }) => ({
  flex: 1,
  alignItems: 'center',
  paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
}));

const StyledIndicator = styled(Animated.View)<{ themeWidth: number }>(
  ({ theme, themeWidth }) => ({
    width: themeWidth,
    height: theme.__hd__.tabs.sizes.indicator,
    backgroundColor: theme.__hd__.tabs.colors.indicator,
    position: 'absolute',
    bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
  })
);

const StyledBadgeWrapper = styled(View)({
  flexDirection: 'row',
  alignItems: 'center',
});

export {
  TabContainer,
  HeaderTabWrapper,
  HeaderTab,
  HeaderTabItem,
  StyledIndicator,
  StyledBadgeWrapper,
};