import { ThemeStyles } from './defaults/themes.interface';
import { getInputStyles } from './getInputStyles';
import { BaseStyleProps } from './baseStyles.interface';
import { getBoxSizedStyles } from './getBoxSizedStyles';
import { getButtonStyles } from './getButtonStyles';
import { getTypographyStyles } from './getTypographyStyles';
import { getBackgroundStyles } from './getBackgroundStyles';
import { getLayoutStyles } from './getLayoutStyles';
import { getFocusStyles } from './getFocusStyles';
import { getUtilityStyles } from './getUtilityStyles';
import { getSeparatorStyles } from './getSeparatorStyles';
import { getLoadingStyles } from './getLoadingStyles';
import { getBodyStyles } from './getBodyStyles';

export const getBaseStyles = ({ colors, tokens }: BaseStyleProps) => {
  const baseStyles: ThemeStyles = {
    boxSize: getBoxSizedStyles(tokens, 'px'),
    button: getButtonStyles({ colors, tokens }),
    separator: getSeparatorStyles({ colors, tokens }),
    input: getInputStyles({ colors, tokens }),
    background: getBackgroundStyles({ colors, tokens }),
    layout: getLayoutStyles({ colors, tokens }),
    loading: getLoadingStyles({ colors, tokens }),
    focus: getFocusStyles({ colors, tokens }),
    typography: getTypographyStyles({ colors, tokens }),
    body: getBodyStyles({ colors, tokens }),
    icon: {},
    utility: getUtilityStyles()
  };
  return baseStyles;
};