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

const getRichTextEditorTheme = (theme: GlobalTheme) => {
  const colors = {
    toolbarBorderColor: theme.colors.secondaryOutline,
    toolbarBackgroundColor: theme.colors.neutralGlobalSurface,
    toolbarButtonSelectedBackground: theme.colors.highlightedSurface,
    text: theme.colors.onDefaultGlobalSurface,
  };

  const sizes = {
    editorMinHeight: theme.sizes.large,
    toolbarButtonSize: theme.sizes.xxxlarge,
    toolbarSeparatorWidth: theme.sizes.xxsmall,
    toolbarSeparatorHeight: theme.sizes.medium,
  };

  const fontSizes = {
    editor: theme.fontSizes.medium,
  };

  const space = {
    wrapperMarginBottom: theme.space.medium,
    toolbarHorizontalPadding: theme.space.small,
    editorPadding: theme.space.medium,
    mention: theme.space.xsmall,
  };

  const radii = {
    mention: theme.radii.medium,
  };

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

export default getRichTextEditorTheme;