import globals from '../globals';
import { getThemeRefs } from '../../helpers/themeHelpers';
import { NotificationCardClass } from '../../components/descope-notification/descope-notification-card/NotificationCardClass';

const globalRefs = getThemeRefs(globals);
const vars = NotificationCardClass.cssVarList;

const shadowColor = '#00000020';

const notification = {
  [vars.hostMinWidth]: '415px',
  [vars.fontFamily]: globalRefs.fonts.font1.family,
  [vars.fontSize]: globalRefs.typography.body1.size,
  [vars.backgroundColor]: globalRefs.colors.surface.main,
  [vars.textColor]: globalRefs.colors.surface.contrast,
  [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
  [vars.verticalPadding]: '0.625em',
  [vars.horizontalPadding]: '1.5em',
  [vars.borderRadius]: globalRefs.radius.xs,

  _bordered: {
    [vars.borderWidth]: globalRefs.border.sm,
    [vars.borderStyle]: 'solid',
    [vars.borderColor]: 'transparent',
  },

  size: {
    xs: { [vars.fontSize]: '12px' },
    sm: { [vars.fontSize]: '14px' },
    md: { [vars.fontSize]: '16px' },
    lg: { [vars.fontSize]: '18px' },
  },

  mode: {
    primary: {
      [vars.backgroundColor]: globalRefs.colors.primary.main,
      [vars.textColor]: globalRefs.colors.primary.contrast,
      [vars.borderColor]: globalRefs.colors.primary.light,
    },
    success: {
      [vars.backgroundColor]: globalRefs.colors.success.main,
      [vars.textColor]: globalRefs.colors.success.contrast,
      [vars.borderColor]: globalRefs.colors.success.light,
    },
    error: {
      [vars.backgroundColor]: globalRefs.colors.error.main,
      [vars.textColor]: globalRefs.colors.error.contrast,
      [vars.borderColor]: globalRefs.colors.error.light,
    },
  },
};

export default notification;
export { vars };
