import { Fragment, forwardRef } from 'react';
import { buildClasses } from 'helpers/utilityHelpers';
import { iconValid } from 'helpers/validators';
import { dismiss } from 'helpers/animationHelpers';
import { isObject, isArray, lowerCase } from 'lodash';
import { MESSAGE_TYPES } from 'package/constants';
import { Progress, VerticalSpacer } from 'components';
import './Notification.css';

const defaultIcon = 'fa-solid fa-info-circle';
const defaultSuccess = 'fa-solid fa-check';
const defaultWarning = 'fa-solid fa-triangle-exclamation';
const defaultError = 'fa-solid fa-circle-exclamation';
const defaultLoading = 'fa-solid fa-circle-notch fa-spin';

const Message = forwardRef((props, ref) => {
  const { message, noIcons, className, args, ...rest } = props;

  const classes = [
    { condition: className, name: className },
    { condition: message.showModal, name: 'modal' },
    { condition: message.showClose === false, name: 'withoutClose' },
  ];

  const buildMessage = () => {
    if (isObject(message) && !isArray(message)) {
      return message.message || message.msg;
    }

    return <p>{message}</p>;
  };

  const buildProgress = () => {
    if (message.type === MESSAGE_TYPES.loading && message.bytesTotal) {
      return (
        <>
          <VerticalSpacer size={7} />
          <Progress
            current={message.bytesLoaded}
            total={message.bytesTotal}
            pctColor='#ffffff'
            noPct={true}
          />
        </>
      );
    }
  };

  const buildSteps = () => {
    if (message.type === MESSAGE_TYPES.loading && message.totalSteps) {
      const steps = [];

      for (let i = 1; i <= message.totalSteps; i++) {
        const className = `fa-solid fa-circle ${message.currentStep === i ? 'active' : ''}`;
        steps.push(<i key={i} className={className} />);
      }

      return (
        <div className='steps'>
          <VerticalSpacer size={7} />
          {steps}
        </div>
      );
    }
  };

  const getDefaultIcon = () => {
    if (message.type) {
      const { type } = message;
      if (lowerCase(type) === 'success') return defaultSuccess;
      if (lowerCase(type) === 'warning') return defaultWarning;
      if (lowerCase(type) === 'error') return defaultError;
      if (lowerCase(type) === 'loading') return defaultLoading;
    }

    return defaultIcon;
  };

  return (
    <Fragment>
      <div ref={ref} className={buildClasses(classes, 'notification')} {...rest}>
        {!noIcons && (
          <div className="icon">
            <i className={iconValid(message.icon) || getDefaultIcon()} />
          </div>
        )}

        <div className="message">
          {buildMessage()}
          {buildProgress()}
          {buildSteps()}
        </div>

        {message.showClose !== false && (
          <div className="close" onClick={() => dismiss(args)} role='presentation'>
            <i className="fa-solid fa-times" />
          </div>
        )}
      </div>

      {message.showModal && <div className='modalBG' />}
    </Fragment>
  );
});

export default Message;