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 native DialogAction layout.
 * Kept in lock-step with the web variant so visual output matches
 * across platforms.
 */
const staticStyles = makeStyles((theme) => ({
  root: {
    paddingVertical: 0,
    justifyContent: 'center',
    paddingHorizontal: theme.spacing[6],
  },
  actionContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
}));

/**
 * Native implementation of `DialogAction`. Mirrors the web variant
 * exactly — the native `Container` + `Typography` primitives already
 * handle the RN shim so no platform-specific branches are required.
 */
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;