import { FC } from 'react';

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

import ReactionAdd from 'src/components/dashboard/reactions/ReactionAdd';

export type ReactionActionsProps = {
  isSender?: boolean;
  onAddReaction?: (emoji: string, unified: string) => void;
  onCloseReactionPicker?: () => void;
  withReactionPicker?: boolean;
};

export const ReactionActions: FC<ReactionActionsProps> = props => {
  const {
    isSender = false,
    onAddReaction,
    onCloseReactionPicker,
    withReactionPicker,
  } = props;

  if (!withReactionPicker) {
    return null;
  }

  return (
    <ButtonGroup
      sx={{
        backgroundColor: '#0b141a33',
        position: 'absolute',
        left: isSender ? '-36px' : 'auto',
        right: !isSender ? '-36px' : 'auto',
        top: 'calc(50% - 15px)',
        px: 0.5,
        py: 0,
        zIndex: '2',
      }}
    >
      {withReactionPicker && (
        <ReactionAdd
          onAdd={onAddReaction}
          onClose={onCloseReactionPicker}
          variant="icon"
        />
      )}
    </ButtonGroup>
  );
};

export default ReactionActions;