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

const BottomNavigationTab = styled(View)<{ themeVisibility?: boolean }>(
  ({ themeVisibility }) => ({
    flex: 1,
    display: themeVisibility === false ? 'none' : 'flex',
  })
);

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

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

const BottomBarWrapper = styled(View)<{
  themeInsets: { top: number; right: number; bottom: number; left: number };
}>(({ themeInsets, theme }) => ({
  ...Platform.select({
    ios: {},
    default: {
      height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
    },
  }),
  paddingBottom: themeInsets.bottom,
  paddingLeft: Math.max(themeInsets.left, themeInsets.right),
  paddingRight: Math.max(themeInsets.left, themeInsets.right),
  backgroundColor: theme.__hd__.bottomNavigation.colors.background,
  borderTopColor: theme.__hd__.bottomNavigation.colors.borderTop,
  borderTopWidth: theme.__hd__.bottomNavigation.borderWidths.borderTop,
  ...theme.__hd__.bottomNavigation.shadows.wrapper,
}));

const BottomBar = styled(View)(({ theme }) => ({
  ...Platform.select({
    ios: {
      height: theme.__hd__.bottomNavigation.sizes.heightIOS,
      paddingTop: theme.__hd__.bottomNavigation.space.contentPaddingTopIOS,
      alignItems: 'flex-end',
    },
    default: {
      flex: 1,
      alignItems: 'center',
    },
  }),
  flexDirection: 'row',
  overflow: 'hidden',
}));

const BottomBarItem = styled(View)({
  flex: 1,
  alignItems: 'center',
});

const StyledBottomBarText = styled(Typography.Label)(({ theme }) => ({
  marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop,
}));

export {
  BottomBar,
  BottomBarItem,
  BottomNavigationTab,
  BottomNavigationContainer,
  BottomBarWrapper,
  ContentWrapper,
  StyledBottomBarText,
};