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

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

import ModalContext from '../ModalContext';
import { ModalSizeTypes } from '../type';
import { ModalSize } from '../constants';

type ModalContainerProps = {
  size?: ModalSizeTypes;
  children: ReactNode;
  styleConfig?: { root?: Styles[] };
};

const ModalContainer: React.FC<ModalContainerProps> = ({ children, styleConfig }) => {
  const { size } = useContext(ModalContext);
  const isFullScreen = size === ModalSize.FULL_SCREEN;

  const rootStyles = useStyles(
    () => ({
      root: {
        // Since it's a web only property, we need to cast it to a number
        maxHeight: isFullScreen ? '100%' : ('calc(100vh - 128px)' as unknown as number),
        overflowY: 'auto',
        height: isFullScreen ? '100%' : undefined,
      },
    }),
    [isFullScreen],
  );

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

export default ModalContainer;