import { CSSProperties, css } from 'glamor';
import React from 'react';
import { useApphouse } from '../../context/useApphouse';
import { observer } from 'mobx-react';
import { merge } from '../../utils/obj/merge';

export interface ChatBubbleStyles {
  container?: CSSProperties;
  content?: CSSProperties;
  right?: CSSProperties;
  left?: CSSProperties;
}

export interface ChatBubbleProps {
  /**
   * The message content
   */
  children: React.ReactNode;
  /**
   * @default "right"
   */
  direction?: 'left' | 'right';
  /**
   * style overwrites
   */
  styleOverwrites?: ChatBubbleStyles;
  surfaceBackground?: string;
}

export const ChatBubble: React.FC<ChatBubbleProps> = observer(
  ({
    children,
    styleOverwrites,
    direction = 'right',
    surfaceBackground = 'surface'
  }) => {
    const { theme } = useApphouse();
    const backgroundColor =
      // @ts-ignore
      theme.colors[surfaceBackground] ?? theme.colors.surface;
    const alternateBackgroundColor = theme.colors.surface10;
    const brandColor = theme.colors.brand;
    const localStyles = merge(
      {
        container: {
          backgroundColor: backgroundColor,
          borderRadius: 0,
          display: 'flex',
          flexDirection: 'column',
          padding: '0.5rem 1.5rem'
        },
        content: {
          borderRadius: '1.15rem',
          maxWidth: '75%',
          padding: '0.5rem .875rem',
          position: 'relative',
          fontFamily: theme.tokens.fontFamily.text,
          wordWrap: 'break-word',
          overflowWrap: 'anywhere',
          '::before': {
            bottom: '-0.1rem',
            content: '""',
            height: '1rem',
            position: 'absolute'
          },
          '::after': {
            bottom: '-0.1rem',
            content: '""',
            height: '1rem',
            position: 'absolute'
          }
        },
        right: {
          alignSelf: 'flex-end',
          backgroundColor: brandColor,
          color: theme.colors.onBrand,
          '::before': {
            borderBottomLeftRadius: '0.8rem 0.7rem',
            borderRight: `1rem solid ${brandColor}`,
            right: '-0.35rem',
            transform: 'translate(0, -0.1rem)'
          },
          '::after': {
            backgroundColor: backgroundColor,
            borderBottomLeftRadius: '0.5rem',
            right: '-40px',
            transform: 'translate(-30px, -2px)',
            width: '10px'
          }
        },
        left: {
          alignSelf: 'flex-start',
          backgroundColor: alternateBackgroundColor,
          color: theme.colors.onSurface,
          '::before': {
            borderBottomRightRadius: '0.8rem 0.7rem',
            borderRight: `1rem solid ${alternateBackgroundColor}`,
            left: '-0.35rem',
            transform: 'translate(0, -0.1rem)'
          },
          '::after': {
            backgroundColor: backgroundColor,
            borderBottomRightRadius: '0.5rem',
            left: '20px',
            transform: 'translate(-30px, -2px)',
            width: '10px'
          }
        }
      },
      styleOverwrites
    );
    return (
      <div
        {...css(localStyles.container)}
        data-xray="ChatBubble"
        data-variant={direction}
        data-style="ChatBubble.container"
      >
        <div
          {...css(
            localStyles.content,
            direction === 'right' ? localStyles.right : localStyles.left
          )}
          data-style="ChatBubble.content"
        >
          {children}
        </div>
      </div>
    );
  }
);