import { vars as textCompVars } from '@descope-ui/descope-text/theme';
import globals from '../globals';
import { getThemeRefs, useVar } from '../../helpers/themeHelpers';
import { AlertClass } from '../../components/descope-alert/AlertClass';

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

const alert = {
  [vars.hostDirection]: globalRefs.direction,
  [vars.backgroundColor]: 'transparent',
  [vars.iconSize]: '1.35em',
  [vars.alignItems]: 'center',
  [vars.borderRadius]: globalRefs.radius.md,
  [vars.horizontalPadding]: '0',
  [vars.verticalPadding]: '0',
  [vars.gap]: `0.5em`,
  [vars.fontSize]: useVar(textCompVars.fontSize),

  mode: {
    error: {
      // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout
      // [vars.icon]: `url(${icon})`,
      [vars.textColor]: globalRefs.colors.error.main,
      _bordered: {
        [vars.borderColor]: globalRefs.colors.error.main,
      },
    },
    success: {
      // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout
      // [vars.icon]: '',
      [vars.textColor]: globalRefs.colors.success.main,
      _bordered: {
        [vars.borderColor]: globalRefs.colors.success.main,
      },
    },
  },

  spacing: {
    xs: {
      [vars.horizontalPadding]: globalRefs.spacing.xs,
      [vars.verticalPadding]: globalRefs.spacing.xs,
    },
    sm: {
      [vars.horizontalPadding]: globalRefs.spacing.sm,
      [vars.verticalPadding]: globalRefs.spacing.sm,
    },
    md: {
      [vars.horizontalPadding]: globalRefs.spacing.md,
      [vars.verticalPadding]: globalRefs.spacing.md,
    },
    lg: {
      [vars.horizontalPadding]: globalRefs.spacing.lg,
      [vars.verticalPadding]: globalRefs.spacing.lg,
    },
    xl: {
      [vars.horizontalPadding]: globalRefs.spacing.xl,
      [vars.verticalPadding]: globalRefs.spacing.xl,
    },
  },

  textAlign: {
    left: {
      [vars.justifyContent]: 'left',
    },
    center: {
      [vars.justifyContent]: 'center',
    },
    right: {
      [vars.justifyContent]: 'right',
    },
  },

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

  _fullWidth: {
    [vars.hostWidth]: '100%',
  },
};

export default alert;
export { vars };
