import { Container } from '@cleartrip/ct-design-container';
import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
import { Typography } from '@cleartrip/ct-design-typography';

import { type IDialogActionProps } from '../type';
import { DialogAlignmentTypes } from '../constants';

/**
 * Static style slots shared across the DialogAction layout.
 *
 * - `root` is the outer wrapper around the action list. Mirrors
 *   aldenui's zero vertical / `theme.spacing[6]` horizontal padding
 *   so existing dialogs keep their proportions.
 * - `actionContainer` centers each button row; the per-button
 *   Container uses it as a base before composing caller overrides.
 */
const staticStyles = makeStyles((theme) => ({
  root: {
    paddingVertical: 0,
    justifyContent: 'center',
    paddingHorizontal: theme.spacing[6],
  },
  actionContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
}));

/**
 * Web implementation of `DialogAction`.
 *
 * Migrated from aldenui (`core/components/components/Dialog/DialogAction`)
 * per Migration.MD. Replaces the legacy `css`/`useTheme` mix with
 * `Container` + composed `styleConfig.root` slots and a dynamic
 * `useStyles` slot for `flexDirection`. The default `alignment` is
 * `'column'` for parity with aldenui's vertical stack.
 */
const DialogAction = ({
  alignment = DialogAlignmentTypes.COLUMN,
  actionButtons = [],
  styleConfig,
}: IDialogActionProps) => {
  const { root: customRootStyles = [] } = styleConfig || {};

  const dynamicStyles = useStyles(
    () => ({
      root: {
        flexDirection: alignment,
      },
    }),
    [alignment],
  );

  return (
    <Container styleConfig={{ root: [staticStyles.root, dynamicStyles.root, ...customRootStyles] }}>
      {actionButtons.map((btn, index) => {
        const { type, onClick, label, styleConfig: buttonStyleConfig } = btn || {};
        const { root: customActionStyles = [] } = buttonStyleConfig || {};

        return (
          <Container
            key={`actionButton_${index}`}
            styleConfig={{ root: [staticStyles.actionContainer, ...customActionStyles] }}
          >
            <Typography variant='HM4' color={type} isClickable={!!onClick} onClick={onClick}>
              {label}
            </Typography>
          </Container>
        );
      })}
    </Container>
  );
};

DialogAction.displayName = 'DialogAction';

export default DialogAction;