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

// Checks if the platform is Android 7x and 8.x, i.e., API levels 24 to 27 (Android 7.0 to 8.1),
// which may require special handling due to known platform-specific issues with layout or styling.
const isAndroid8 =
  Platform.OS === 'android' && Platform.Version >= 24 && Platform.Version <= 27;

const TabScreen = styled(View)({
  flex: 1,
});

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

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

const HeaderTabItem = styled(Animated.View)<{ isFirstItem?: boolean }>(
  ({ theme, isFirstItem }) => ({
    marginLeft: isFirstItem ? 0 : theme.__hd__.tabs.space.itemMargin,
    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
  })
);

const HeaderTabItemOutlineWrapper = styled(View)(({ theme }) => ({
  paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
  ...StyleSheet.absoluteFillObject,
}));

const HeaderTabItemOutline = styled(Animated.View)<{ themeActive: boolean }>(
  ({ theme, themeActive }) => ({
    borderRadius: theme.__hd__.tabs.radii.outline,
    backgroundColor: themeActive
      ? theme.__hd__.tabs.colors.activeBackground
      : undefined,
  })
);

const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
  paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
  paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
  position: 'relative',
  justifyContent: 'center',
  ...(!isAndroid8 && {
    alignItems: 'center',
  }),
}));

const HeaderTabItemIndicator = styled(Animated.View)(({ theme }) => ({
  width: '100%',
  height: theme.__hd__.tabs.sizes.indicator,
  position: 'absolute',
  bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
  zIndex: 999,
  backgroundColor: theme.__hd__.tabs.colors.indicator,
}));

export {
  HeaderTabItem,
  TabScreen,
  TabContainer,
  HeaderTabWrapper,
  HeaderTabItemOutlineWrapper,
  HeaderTabItemOutline,
  HeaderTabItemWrapper,
  HeaderTabItemIndicator,
};