import React, {memo, PropsWithChildren, useMemo} from 'react';
import {View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {EaseView} from 'react-native-ease';
import {CHATS_SPACING} from '@modules/chats/utils';
import {SpringTransitionConfig} from '@modules/chats/constants';
import {useTheme} from '@shared/theme';
import {windowDimensions} from '@shared/constants';

import {styles} from './styles';
import {ContextReactions, ContextReactionsOption} from '../ContextReactions';
import {REACTIONS_HEIGHT} from '../ContextReactions/styles';
import {ContextMenu, ContextMenuOption} from '../ContextMenu';

interface Props extends PropsWithChildren {
  canReact: boolean;
  reactions: ContextReactionsOption[];
  options: ContextMenuOption[];
  pageY: number;
  itemHeight: number;
  xPosition?: {left: number; right?: never} | {right: number; left?: never};
}

const MENU_ITEM_HEIGHT = 50;

const MessageContextMenuComponent = ({
  children,
  reactions,
  options,
  pageY,
  itemHeight,
  xPosition = {right: 0},
  canReact = false,
}: Props) => {
  const {bottom: safeBottom, top: safeTop} = useSafeAreaInsets();
  const {theme, spacing} = useTheme();

  const contextMenuHeight = useMemo(() => {
    return MENU_ITEM_HEIGHT * options.length + spacing.x2 * 2;
  }, [options.length, spacing.x2]);

  const childrenTop = useMemo(() => {
    return Math.max(
      Math.min(
        pageY,
        windowDimensions.height - contextMenuHeight - itemHeight - safeBottom,
      ),
      safeTop + CHATS_SPACING.gap * 4 + REACTIONS_HEIGHT,
    );
  }, [pageY, contextMenuHeight, itemHeight, safeBottom, safeTop]);

  const contextMenuTop = useMemo(
    () =>
      Math.min(
        itemHeight + CHATS_SPACING.gap * 2,
        windowDimensions.height -
          childrenTop -
          contextMenuHeight -
          safeBottom +
          CHATS_SPACING.gap * 2,
      ),
    [childrenTop, contextMenuHeight, itemHeight, safeBottom],
  );

  return (
    <View style={[styles.menuContainer, {top: childrenTop}]}>
      {canReact && (
        <ContextReactions
          style={[
            {backgroundColor: theme.background.elements.overlay},
            xPosition,
            {
              top: -REACTIONS_HEIGHT - CHATS_SPACING.gap,
            },
          ]}
          reactions={reactions}
        />
      )}
      <EaseView
        initialAnimate={{
          translateY: pageY === childrenTop ? 0 : pageY - childrenTop,
        }}
        animate={{translateY: 0}}
        transition={SpringTransitionConfig}>
        {children}
      </EaseView>
      {!!options.length && (
        <ContextMenu
          isLeft={typeof xPosition.left === 'number'}
          options={options}
          style={[
            {backgroundColor: theme.background.elements.overlay},
            xPosition,
            {top: contextMenuTop},
          ]}
        />
      )}
    </View>
  );
};

export const MessageContextMenu = memo(MessageContextMenuComponent);
