'use client';

import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport
} from '@/components/ui/Toasts/toast';
import { useToast } from '@/components/ui/Toasts/use-toast';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

export function Toaster() {
  const { toast, toasts } = useToast();
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();

  useEffect(() => {
    const status = searchParams?.get('status');
    const status_description = searchParams?.get('status_description');
    const error = searchParams?.get('error');
    const error_description = searchParams?.get('error_description');
    
    if (status === 'success') {
      toast({
        title: status_description || 'Успешно!',
        description: status === 'success' ? 'Операцията е изпълнена успешно.' : '',
        variant: 'default',
      });
    }
    
    if (error) {
      toast({
        title: 'Грешка',
        description: error_description || error,
        variant: 'destructive',
      });
    }
  }, [searchParams, pathname, router, toast]);

  return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        );
      })}
      <ToastViewport />
    </ToastProvider>
  );
}