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

const getToolbarTheme = (theme: GlobalTheme) => {
  const colors = {
    background: theme.colors.defaultGlobalSurface,
    border: theme.colors.secondaryOutline,
    primary: theme.colors.primary,
    secondary: theme.colors.mutedOnDefaultGlobalSurface,
    info: theme.colors.info,
    success: theme.colors.success,
    danger: theme.colors.onErrorSurface,
    disabled: theme.colors.disabledOnDefaultGlobalSurface,
    iconButtonBackground: theme.colors.highlightedSurface,
    inputContainerBackground: theme.colors.neutralGlobalSurface,
    text: theme.colors.onDefaultGlobalSurface,
    placeholder: theme.colors.mutedOnDefaultGlobalSurface,
  };

  const space = {
    verticalPadding: theme.space.small,
    horizontalPadding: theme.space.small,
    iconButtonLabelMarginLeft: theme.space.small,
    iconButtonWrapperPadding: theme.space.smallMedium,
    messageWrapperMarginHorizontal: theme.space.small,
    messageWrapperPaddingVertical: theme.space.smallMedium,
    messageWrapperPaddingHorizontal: theme.space.small,
    messageInputPaddingHorizontal: theme.space.smallMedium,
    messageInputPaddingVertical: theme.space.small,
    affixInnerMargin: theme.space.medium,
  };

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

  const sizes = {
    itemWrapperHeight: scale(64),
    messageWrapperHeight: scale(64),
    messageInputHeight: scale(40),
  };

  const radii = {
    iconButtonWrapperBorderRadius: theme.radii.xxxlarge,
    messageContainer: theme.radii.rounded,
  };

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

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

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

export default getToolbarTheme;