import { makeStyles } from '@cleartrip/ct-design-style-manager';
import { BaseTheme } from '@cleartrip/ct-design-theme';

import { AlertCalloutVariant } from './type';
import { AlertCalloutVariants } from './constants';

/**
 * Static, platform-agnostic styles for AlertCallout.
 *
 * The variant-dependent background colour is merged in at render time via
 * `useStyles` (see AlertCallout.tsx / AlertCallout.native.tsx). These
 * static entries cover the structural layout only.
 */
const alertCalloutStaticStyles = makeStyles((theme) => ({
  rootContainer: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    paddingVertical: theme.spacing[2],
    paddingHorizontal: theme.spacing[3],
    borderRadius: theme.border.radius[8],
  },
  // Flex helpers — replacements for aldenui's global `gs` shortcuts.
  flexRowBetween: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  flexRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  flexMiddle: {
    display: 'flex',
    alignItems: 'center',
  },
  prefixIconSpacing: {
    flexShrink: 0,
    marginRight: theme.spacing[2],
  },
  rightActionSpacing: {
    flexShrink: 0,
    marginLeft: theme.spacing[3],
  },
}));

const COLOR_MAPPING: Partial<Record<AlertCalloutVariants, string>> = {
  [AlertCalloutVariants.SUCCESS]: BaseTheme.color.alert.success,
  [AlertCalloutVariants.ERROR]: BaseTheme.color.alert.error,
  [AlertCalloutVariants.WARNING]: BaseTheme.color.alert.warning,
  [AlertCalloutVariants.WARNING_LIGHT]: BaseTheme.color.alert.warningLight,
  [AlertCalloutVariants.INFO]: BaseTheme.color.alert.info,
  [AlertCalloutVariants.NEUTRAL]: BaseTheme.color.alert.neutral,
};

export function getAlertCalloutColourCode(variant?: AlertCalloutVariant): string {
  const resolved = variant ?? AlertCalloutVariants.SUCCESS;
  return COLOR_MAPPING[resolved] ?? (COLOR_MAPPING[AlertCalloutVariants.SUCCESS] || '');
}

export default alertCalloutStaticStyles;