import { FC } from 'react';

import 'src/components/dashboard/chat/i18n';

import ButtonGroup from '@material-hu/mui/ButtonGroup';

import { ChatType } from 'src/types/chats';

import {
  MessageMenu,
  MessageMenuProps,
} from 'src/components/dashboard/chat/ChatThread/MessageActions/MessageMenu';

export type MessageActionsProps = Omit<MessageMenuProps, 'onClose'> & {
  chatId: number;
  chatType: ChatType;
  messageId: string | number;
  sender: any;
  onCloseMenu?: () => void;
  withMenu?: boolean;
  isSender?: boolean;
  isFile?: boolean;
  onOpenDialog?: () => void;
};

export const MessageActions: FC<MessageActionsProps> = props => {
  const {
    chatId,
    chatType,
    messageId,
    sender,
    onCloseMenu = () => null,
    withMenu = true,
    isSender = false,
    isFile = false,
    onOpenDialog = () => null,
    ...menuProps
  } = props;

  if (!withMenu) {
    return null;
  }

  const getBackgroundColor = () => {
    if (isFile) {
      return 'transparent';
    } else {
      return isSender ? '#DAFFD0' : '#FFFFFF';
    }
  };

  return (
    <ButtonGroup
      sx={{
        backgroundColor: getBackgroundColor(),
        position: 'absolute',
        right: '0',
        top: '0',
        zIndex: '2',
      }}
    >
      {withMenu && (
        <MessageMenu
          sender={sender}
          onClose={onCloseMenu}
          onOpenDialog={onOpenDialog}
          chatId={chatId}
          messageId={messageId}
          chatType={chatType}
          {...menuProps}
        />
      )}
    </ButtonGroup>
  );
};

export default MessageActions;