import { useEffect } from 'react';
import { useToast } from './ToastContext';
import { Button, Toast, ToastContainer } from 'react-bootstrap';

const styles = `.fade{--bs-toast-spacing: 0rem}`;

const Toasts = () => {
  const { toasts, removeToast } = useToast();

  const successToasts = toasts.filter((toast) => toast.type === 'success');

  useEffect(() => {
    const timer = setTimeout(() => {
      successToasts.forEach((toast) => {
        removeToast(toast.id);
      });
    }, 5000);

    return () => clearTimeout(timer);
  }, [successToasts, removeToast]);

  return (
    <>
      <style>{styles}</style>
      <ToastContainer
        className='toast-container position-fixed bottom-0 end-0 p-3'
        style={{
          maxHeight: '80vh',
          overflowY: 'auto',
          display: 'flex',
          flexDirection: 'column',
          gap: '10px',
          boxSizing: 'content-box',
          pointerEvents: 'auto',
          backgroundColor: 'transparent',

          // hide the scrollbar
          scrollbarWidth: 'none',
          msOverflowStyle: 'none',
        }}
      >
        {toasts.map((toast) => (
          <Toast key={toast.id} style={{ pointerEvents: 'auto' }}>
            <Toast.Body
              className={`toast align-items-center text-bg-${toast.type} border-0`}
              role='alert'
              aria-live='assertive'
              aria-atomic='true'
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'flex-start',
                gap: '10px',
                textWrap: 'wrap',
              }}
            >
              <span style={{ fontSize: '16px' }}>
                <b>
                  {toast.type.charAt(0).toUpperCase() + toast.type.slice(1) ===
                  'Danger'
                    ? 'Error'
                    : toast.type.charAt(0).toUpperCase() + toast.type.slice(1)}
                  :{' '}
                </b>
                {toast.message}
              </span>
              <Button
                className='btn-close btn-close-white me-0 m-auto'
                data-bs-dismiss='toast'
                aria-label='Close'
                onClick={() => removeToast(toast.id)}
                style={{
                  backgroundColor: 'transparent',
                  boxShadow: 'none',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = 'transparent';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = 'transparent';
                }}
                onFocus={(e) => {
                  e.currentTarget.style.boxShadow = 'none';
                }}
                onBlur={(e) => {
                  e.currentTarget.style.boxShadow = 'none';
                }}
              ></Button>
            </Toast.Body>
          </Toast>
        ))}
      </ToastContainer>
    </>
  );
};

export default Toasts;
