import {Platform, StyleSheet} from 'react-native';
import {NewThemeColors, SPACING, ThemeColors} from '@shared/theme';
import {windowDimensions} from '@shared/constants';

const DEFAULT_TABBAR_HEIGHT = 84;
const MIN_TABBAR_HEIGHT = 64;
const TABBAR_PADDING_HORIZONTAL = SPACING.x3;
const TABBAR_PADDING_BOTTOM = SPACING['x2.5'];

export const getTabbarStyles = (
  theme: ThemeColors & NewThemeColors,
  bottom: number,
) =>
  StyleSheet.create({
    container: {
      backgroundColor: theme.background.layout.tertiary,
      flexDirection: 'row',
      height: DEFAULT_TABBAR_HEIGHT,
      justifyContent: 'space-between',
      paddingHorizontal: TABBAR_PADDING_HORIZONTAL,
      paddingTop: SPACING['x0.5'],
      ...Platform.select({
        ios: {
          shadowColor: theme.shadow['8dp'],
          shadowOffset: {
            width: 0,
            height: -2,
          },
          shadowOpacity: 0.24,
          paddingBottom: TABBAR_PADDING_BOTTOM,
        },
        android: {
          elevation: 8,
          borderWidth: 0.1,
          borderColor: theme.shadow['8dp'],
          height: bottom > 0 ? MIN_TABBAR_HEIGHT + bottom : MIN_TABBAR_HEIGHT,
          paddingBottom: bottom || TABBAR_PADDING_BOTTOM,
        },
      }),
    },
  });

export const getTabBarButtonWidth = (routesLength: number) => {
  const tabBarWidth = windowDimensions.width - 2 * TABBAR_PADDING_HORIZONTAL;
  const spaceBetweenButtons = SPACING.x2 * (routesLength - 1);
  const buttonWidth = (tabBarWidth - spaceBetweenButtons) / routesLength;
  return Math.round(buttonWidth);
};
