import { Avatar, Tooltip } from '@8base/boost';
import cx from 'classnames';
import React from 'react';

import css from './message.module.css';

// -- TYPES

export interface IMessageProps {
  children: React.ReactNode;
  avatar: {
    src?: string;
    firstName?: string | null;
    lastName?: string | null;
  };
  className: {
    wrapper?: string;
    body?: string;
  };
  timestamp?: string;
  isOwner?: boolean;
  hasAvatar?: boolean;
  hasArrow?: boolean;
  onClickBody?: (e: React.MouseEvent<HTMLDivElement>) => void;
}

// -- MAIN

function Message({
  className,
  isOwner,
  hasAvatar,
  children,
  timestamp,
  avatar,
  hasArrow,
  onClickBody,
}: IMessageProps) {
  const cn = cx(className.wrapper, isOwner ? css.own : css.normal);
  const cnBody = cx(className.body, hasArrow ? css['body-with-arrow'] : css.body);

  return (
    <div className={cn}>
      {hasAvatar && (
        <Tooltip message={`${avatar.firstName} ${avatar.lastName}`}>
          <Avatar
            className={css.avatar}
            size="sm"
            src={avatar.src}
            firstName={avatar.firstName}
            lastName={avatar.lastName}
          />
        </Tooltip>
      )}

      <div className={css.content}>
        <div className={cnBody} onClick={onClickBody}>
          {children}
        </div>

        {timestamp && <div className={css.timestamp}>{timestamp}</div>}
      </div>
    </div>
  );
}

Message.defaultProps = {
  avatar: {},
  className: {},
  hasArrow: true,
};

export default Message;