import type { GlobalTheme } from '../global';

const getSearchTheme = (theme: GlobalTheme) => {
  const colors = {
    basic: {
      containerBackground: theme.colors.neutralGlobalSurface,
      border: theme.colors.neutralGlobalSurface,
    },
    reversed: {
      containerBackground: theme.colors.defaultGlobalSurface,
      border: theme.colors.secondaryOutline,
    },
    suffixBackground: theme.colors.defaultGlobalSurface,
    text: theme.colors.onDefaultGlobalSurface,
    shadow: theme.colors.primaryOutline,
    placeholder: theme.colors.mutedOnDefaultGlobalSurface,
  };

  const shadows = {
    container: theme.shadows.default,
  };

  const space = {
    containerHorizontalPadding: theme.space.small,
    containerVerticalPadding: theme.space.small,
    inputHorizontalMargin: theme.space.small,
    inputVerticalPadding: theme.space.xxsmall,
    prefixHorizontalPadding: theme.space.xsmall,
    surfixPadding: theme.space.small,
    badgeTop: -theme.space.xxsmall,
    badgeRight: -theme.space.xxsmall,
  };

  const fonts = {
    text: theme.fonts.neutral.regular,
  };

  const fontSizes = {
    text: theme.fontSizes.large,
  };

  const borderWidths = {
    container: {
      default: theme.borderWidths.base,
    },
  };

  const radii = {
    container: theme.radii.rounded,
    surfix: theme.radii.rounded,
  };

  const sizes = {
    surfixSize: theme.sizes.xxlarge,
  };

  return {
    colors,
    space,
    fonts,
    fontSizes,
    borderWidths,
    radii,
    sizes,
    shadows,
  };
};

export default getSearchTheme;