import { forwardRef } from 'react';

import { css } from '@emotion/css';
import { Transition } from '@cleartrip/ct-design-transition';
import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';

import { ModalVariant } from '../constants';
import { getBackdropDynamicStyles, staticBackdropStyles } from './style';
import { BackdropProps } from './type';

const webStyle = css({
  position: 'fixed',
});

const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(
  (
    { children, open, transitionDuration, styleConfig, blur, variant = ModalVariant.NEUTRAL, ...rest },
    forwardedRef,
  ) => {
    const dynamicStyles = useStyles(() => ({ root: getBackdropDynamicStyles({ blur, variant }) }), [blur, variant]);

    const className = useWebMergeStyles(
      [staticBackdropStyles.root, dynamicStyles.root, webStyle, ...(styleConfig?.root ?? [])],
      [dynamicStyles.root, styleConfig?.root],
    );

    return (
      <Transition in={open} timeout={transitionDuration} type='fade'>
        <div ref={forwardedRef} className={className} {...rest}>
          {children}
        </div>
      </Transition>
    );
  },
);

Backdrop.displayName = 'Backdrop';

export default Backdrop;