'use client';
/* eslint-disable jsdoc/require-jsdoc */

import type { DataHTMLAttributes } from 'react';
import { classNames } from '@vkontakte/vkjs';
import { useExternRef } from '../../hooks/useExternRef';
import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation/useCSSTransition';
import type { HasRootRef } from '../../types';
import styles from './ModalOverlay.module.css';

const positionClassNames = {
  absolute: styles.hostPositionAbsolute,
  fixed: styles.hostPositionFixed,
};

const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {
  appear: styles.hostStateEnter,
  appearing: styles.hostStateEntering,
  appeared: styles.hostStateEntered,
  enter: styles.hostStateEnter,
  entering: styles.hostStateEntering,
  entered: styles.hostStateEntered,
  exit: styles.hostStateExit,
  exiting: styles.hostStateExiting,
  exited: styles.hostStateExited,
};

export interface ModalOverlayProps
  extends DataHTMLAttributes<HTMLDivElement>,
    HasRootRef<HTMLDivElement> {
  visible?: boolean | undefined;
  position?: 'absolute' | 'fixed' | undefined;
  onClick?: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined;
  onClosed?: (() => void) | undefined;
  onShowed?: (() => void) | undefined;
  disableOpenAnimation?: boolean | undefined;
  disableCloseAnimation?: boolean | undefined;
}

/**
 * @private
 */
export const ModalOverlay = ({
  visible = false,
  position = 'absolute',
  getRootRef,
  onClick,
  onClosed,
  onShowed,
  disableOpenAnimation,
  disableCloseAnimation,
  ...restProps
}: ModalOverlayProps) => {
  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(visible, {
    enableAppear: !disableOpenAnimation,
    enableEnter: !disableOpenAnimation,
    enableExit: !disableCloseAnimation,
    onExited: onClosed,
    onEntered: onShowed,
  });
  const handleRef = useExternRef(getRootRef, ref);

  return (
    <div
      {...restProps}
      ref={handleRef}
      aria-hidden="true"
      hidden={transitionState === 'exited'}
      className={classNames(
        styles.host,
        onClick === undefined && styles.nonInteractive,
        positionClassNames[position],
        transitionStateClassNames[transitionState],
      )}
      onClick={onClick}
      onTransitionEnd={onTransitionEnd}
    />
  );
};