import React, { ReactNode, useContext } from 'react';

import { Container } from '@cleartrip/ct-design-container';
import { useStyles } from '@cleartrip/ct-design-style-manager';
import type { Styles } from '@cleartrip/ct-design-types';

import ModalContext from '../ModalContext';
import { ModalProps } from '../type';

type ModalActionProps = Pick<ModalProps, 'footerAlignment'> & {
  children: ReactNode;
  styleConfig?: { root?: Styles[] };
};

const alignmentMap = {
  start: 'flex-start',
  end: 'flex-end',
  center: 'center',
} as const;

const ModalAction: React.FunctionComponent<ModalActionProps> = ({ children, styleConfig }) => {
  const { footerAlignment = 'end' } = useContext(ModalContext);

  const rootStyles = useStyles(
    (theme) => ({
      root: {
        display: 'flex',
        justifyContent: alignmentMap[footerAlignment],
        paddingTop: theme.spacing[6],
        paddingBottom: theme.spacing[6],
        paddingLeft: theme.spacing[4],
        paddingRight: theme.spacing[4],
        boxShadow: theme.elevation.topE1,
      },
    }),
    [footerAlignment],
  );

  return <Container styleConfig={{ root: [rootStyles.root, ...(styleConfig?.root ?? [])] }}>{children}</Container>;
};

export default ModalAction;