import React, { PropsWithChildren } from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { useStyles } from '../../hooks';

export type LLChatMessageMenuStyles = {
  menuContainer: ViewStyle;
};

export type LLChatMessageMenuProps =
  ComponentStyleProp<LLChatMessageMenuStyles> &
    PropsWithChildren<{
      visible: boolean;
    }>;

export function LLChatMessageMenu({
  visible,
  styles: stylesProp,
  children,
}: LLChatMessageMenuProps) {
  const menuStyles = useStyles({
    componentStylesFn: getChatMessageMenuStyles,
    stylesProp,
  });

  if (!visible) {
    return null;
  }
  return <View style={menuStyles.menuContainer}>{children}</View>;
}

const getChatMessageMenuStyles: LLComponentStyleFn<LLChatMessageMenuStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    menuContainer: {
      position: 'absolute',
      top: 5,
      right: 5,
      flexDirection: 'column',
      paddingHorizontal: 10,
      backgroundColor: theme.popoverBackground,
      borderRadius: 8,
    },
  });