import { forwardRef } from 'react';

import { Container, ContainerRef } from '@cleartrip/ct-design-container';
import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
import { Cross, ModalBack } from '@cleartrip/ct-design-icons';

import Modal from '../Modal';
import { ModalVariant } from '../constants';
import { ModalWithCloseOverlayProps } from './type';

const staticStyles = makeStyles(() => ({
  root: {
    position: 'relative',
  },

  modalCard: {
    overflowY: 'visible',
  },
}));

/**
 * Returns the close icon for the modal — a back arrow when `isBack` is true,
 * otherwise a cross whose stroke matches the modal variant.
 */
const getCloseIcon = (isBack = false, variant: `${ModalVariant}` = ModalVariant.NEUTRAL) => {
  if (isBack) {
    return <ModalBack />;
  }
  return variant === ModalVariant.DARK ? (
    <Cross height={24} width={24} crossColor='rgba(255, 255, 255, 1)' />
  ) : (
    <Cross height={24} width={24} crossColor='#1A1A1A' />
  );
};

/**
 * Modal variant that renders a floating close/back button above (or below) the
 * modal content. Useful for dialogs where the close affordance should sit
 * outside the content card.
 */
const ModalWithCloseOverlay = forwardRef<ContainerRef, ModalWithCloseOverlayProps>((props, forwardedRef) => {
  const {
    isBack = false,
    isCenter,
    isTop = true,
    variant = ModalVariant.NEUTRAL,
    children,
    styleConfig,
    wrapperStyles,
    ...rest
  } = props || {};
  const { onClose } = rest;

  const closeButtonStyles = useStyles(
    (theme) => ({
      root: {
        position: 'absolute',
        right: (isCenter ? '50%' : isBack ? 'unset' : 0) as unknown as number,
        transform: isCenter ? 'translateX(50%)' : 'none',
        backgroundColor:
          variant === ModalVariant.DARK ? theme.color.background.defaultDarkest : theme.color.background.neutral,
        height: 32,
        width: 32,
        display: 'flex',
        alignItems: 'center',
        padding: theme.spacing[1],
        borderRadius: 40,
        cursor: 'pointer',
        ...(isTop ? { top: -42 } : { bottom: -42 }),
      },
    }),
    [isBack, variant, isCenter, isTop],
  );

  const CloseIcon = getCloseIcon(isBack, variant);

  return (
    <Modal
      ref={forwardedRef}
      variant={variant}
      {...rest}
      blur
      size='NONE'
      insidePortal
      styleConfig={{
        modalContentStyles: [staticStyles.modalCard, ...(styleConfig?.modalContentStyles ?? [])],
      }}
    >
      <Container styleConfig={{ root: [staticStyles.root, ...(styleConfig?.root ?? [])] }}>
        <Container styleConfig={{ root: [...(wrapperStyles ?? []), ...(styleConfig?.wrapper ?? [])] }}>
          <Container
            styleConfig={{ root: [closeButtonStyles.root, ...(styleConfig?.closeButton ?? [])] }}
            onClick={() => onClose?.()}
          >
            {CloseIcon}
          </Container>
        </Container>
        {children}
      </Container>
    </Modal>
  );
});

ModalWithCloseOverlay.displayName = 'ModalWithCloseOverlay';

export default ModalWithCloseOverlay;