import React, { memo } from 'react';

import { areEqual } from 'Utils/equalityChecks';
import { CheckedMarkSvg } from 'Components/Icons/CheckedMark';

import classes from './contractFormsToast.module.css';

export interface Props {
  showToast: boolean;
  message: string;
  type?: 'success' | 'error';
}

const ContractFormsToast = ({ showToast = false, message, type = 'success' }: Props) => {
  const getToastClass = () => (type === 'success' ? classes.toastSuccess : classes.toastWarning);

  return (
    <div
      className={`toast fade d-flex align-items-center position-absolute border-0 bottom-0 ${
        showToast ? 'show' : 'hide'
      } ${classes.toastBase} ${getToastClass()}`}
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div className={`toast-body ${classes['toast-body-override']} ${classes.toastText}`}>
        {message}
        {type === 'success' && (
          <span className={`${classes.toastIcon}`}>
            <CheckedMarkSvg />
          </span>
        )}
      </div>
    </div>
  );
};

ContractFormsToast.defaultProps = {
  type: 'success',
};

const ContractFormsToastMemo = memo(ContractFormsToast, areEqual);

export { ContractFormsToastMemo as ContractFormsToast };