import { Platform } from 'react-native';
import { scale } from '../../utils/scale';
import type { GlobalTheme } from '../global';

const getSegmentedControlTheme = (theme: GlobalTheme) => {
  const sizes = {
    itemHeight: {
      medium: scale(28),
      large: scale(36),
    },
    wrapperHeight: {
      medium: scale(36),
      large: scale(44),
    },
  };

  const colors = {
    itemBackground: {
      inactive: 'transparent',
      active: theme.colors.defaultGlobalSurface,
    },
    wrapperBackground: theme.colors.neutralGlobalSurface,
  };

  const shadows = {
    item: {
      inactive: undefined,
      active: theme.shadows.default,
    },
  };

  const radii = {
    item: {
      medium: theme.radii.large,
      large: theme.radii.xlarge,
    },
    wrapper: {
      medium: theme.radii.xlarge,
      large: theme.radii.xxlarge,
    },
  };

  const space = {
    wrapperHorizontalPadding: theme.space.xsmall,
    itemLabelGap: theme.space.xsmall,
    itemLabelMarginEnd: theme.space.smallMedium,
    itemAffixGap: theme.space.small,
  };

  const lineHeights = {
    itemText: Platform.select({
      android: 20,
      ios: undefined,
    }),
  };

  return { sizes, colors, shadows, radii, space, lineHeights };
};

export default getSegmentedControlTheme;