import React from 'react';
import { Text, as } from 'folds';
import classNames from 'classnames';
import * as css from './layout.css';

export const MessageBase = as<'div', css.MessageBaseVariants>(
  ({ className, highlight, selected, collapse, autoCollapse, space, newMessage, ...props }, ref) => (
    <div
      className={classNames(
        css.MessageBase({ highlight, selected, collapse, autoCollapse, space, newMessage }),
        className
      )}
      {...props}
      ref={ref}
    />
  )
);

export const AvatarBase = as<'span'>(({ className, ...props }, ref) => (
  <span className={classNames(css.AvatarBase, className)} {...props} ref={ref} />
));

export const Username = as<'span'>(({ as: AsUsername = 'span', className, ...props }, ref) => (
  <AsUsername className={classNames(css.Username, className)} {...props} ref={ref} />
));

export const UsernameBold = as<'b'>(({ as: AsUsernameBold = 'b', className, ...props }, ref) => (
  <AsUsernameBold className={classNames(css.UsernameBold, className)} {...props} ref={ref} />
));

export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?: boolean }>(
  ({ as: AsComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => {
    const bodyClass = classNames(
      css.MessageTextBody({ preWrap, jumboEmoji, emote }),
      className
    );

    // Skip folds Text for jumbo — its DefaultReset sets font-size:inherit and wins the cascade.
    if (jumboEmoji) {
      return (
        <AsComp
          className={bodyClass}
          data-allow-text-selection="true"
          data-jumbo-emoji="true"
          {...props}
          ref={ref}
        />
      );
    }

    return (
      <Text
        as={AsComp}
        size="T400"
        priority={notice ? '300' : '400'}
        className={bodyClass}
        data-allow-text-selection="true"
        {...props}
        ref={ref}
      />
    );
  }
);
