import { type FC } from 'react';

import { IconChecks, IconClock } from '@material-hu/icons/tabler';
import { type Theme } from '@material-hu/mui/styles';

import { StateMessage } from 'src/pages/dashboard/Conversations/types';

const SIZE_ICON = 16;
type MessageStateProps = {
  state: StateMessage;
  theme: Theme;
  isLoggedUserMessage?: boolean;
  hidden?: boolean;
  style?: React.CSSProperties;
  isSystemMessage?: boolean;
  isReplyMessageType?: boolean;
  isForwardMessageType?: boolean;
};

const MessageState: FC<MessageStateProps> = props => {
  const {
    state,
    theme,
    isLoggedUserMessage = false,
    hidden = false,
    style,
    isSystemMessage,
    isReplyMessageType,
    isForwardMessageType,
  } = props;

  if (
    !isLoggedUserMessage ||
    hidden ||
    (isSystemMessage && !isReplyMessageType && !isForwardMessageType)
  ) {
    return null;
  }

  if (state === StateMessage.RECEIVED) {
    return (
      <IconChecks
        size={SIZE_ICON}
        color={theme.palette.new.text.neutral.lighter}
        style={style}
      />
    );
  }
  if (state === StateMessage.READ) {
    return (
      <IconChecks
        size={SIZE_ICON}
        color={theme.palette.new.graphics.brand[400]}
        style={style}
      />
    );
  }
  if (state === StateMessage.PENDING) {
    return (
      <IconClock
        size={SIZE_ICON}
        color={theme.palette.new.text.neutral.default}
        style={style}
      />
    );
  }

  return (
    <IconChecks
      size={SIZE_ICON}
      color={theme.palette.new.text.neutral.lighter}
      style={style}
    />
  );
};

export default MessageState;