import * as React from 'react';
import { IToast, ToastStatus } from '@assets/js-shop/Interfaces';
import { useTimeout } from '@assets/js-shop/components/hooks/useTimeout';

interface ToastProps {
   item: IToast;
}

export function Toast(props: ToastProps) {
   const isVisible = useTimeout(3000);

   let style = '';
   switch (props.item.status) {
      case ToastStatus.Success:
         style = 'toast-success';
         break;
      case ToastStatus.Error:
      case ('danger' as ToastStatus):
         style = 'toast-error';
         break;
      case ToastStatus.Warning:
         style = 'toast-warning';
         break;
      case ToastStatus.Info:
         style = 'toast-info';
         break;
   }

   if (!isVisible) {
      return <></>;
   }

   return (
      <div>
         <div className={`toast ${style}`}>
            {props.item.content}
         </div>
      </div>
   );

}
