import React, { useEffect, useState } from 'react';
import Style from './toast.style';

export interface IItemsToast {
   message: string | JSX.Element;
   opened: boolean;
   index: number;
   type?: 'danger' | 'error' | 'warning' | 'success';
   forceClose: any;
   closeTimer: any;
}

const Toast: React.FunctionComponent<{ item: IItemsToast }> = ({ item }) => {
   const { message, opened, type, forceClose } = item;

   const [opening, setOpening] = useState(false);
   const [closing, setClosing] = useState(false);

   useEffect(() => {
      if (opened) {
         setOpening(true);
      } else {
         setClosing(true);
         setOpening(false);
      }
   }, [opened]);

   return (
      <Style>
         <div
            className={`ds-toast-container alert ${closing && 'closing'} ${opening && 'opening'}`}
            onClick={forceClose}
         >
            <div className="ds-toast">
               {type && (
                  <div className={`icon ${type}`}>
                     {type === 'error' && <i className="fas fa-exclamation-circle" />}
                     {type === 'danger' && <i className="fas fa-exclamation" />}
                     {type === 'warning' && <i className="fas fa-exclamation-triangle" />}
                  </div>
               )}
               <div className="message">{message}</div>
               <div className="close">
                  <i className="fas fa-times" />
               </div>
            </div>
         </div>
      </Style>
   );
};

export default Toast;
