// Example usage of the notification system in components

import { notify } from "../context/NotificationProvider";
import { toast } from "react-toastify";

// Method 1: Using the notify utility (recommended)
export const exampleNotifyUsage = () => {
  // Success notification
  notify.success("Operation completed successfully!");

  // Error notification
  notify.error("Something went wrong!");

  // Info notification
  notify.info("Here's some information for you");

  // Warning notification
  notify.warning("Please be careful!");

  // With custom options
  notify.success("Data saved!", {
    autoClose: 3000,
    position: "bottom-right",
  });

  // Dismiss a specific toast
  notify.dismiss("toast-id");

  // Dismiss all toasts
  notify.dismissAll();
};

// Method 2: Using toast directly (also works)
export const exampleToastUsage = () => {
  // Basic usage
  toast.success("Success message");
  toast.error("Error message");
  toast.info("Info message");
  toast.warning("Warning message");

  // With options
  toast.success("Custom toast", {
    position: "top-center",
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    toastId: "my-custom-toast", // Prevent duplicates
  });

  // With custom content
  toast.success(
    <div>
      <strong>Title</strong>
      <div>Message content</div>
      <small>Additional details</small>
    </div>,
    {
      autoClose: 7000,
    }
  );

  // Promise-based toast (for async operations)
  const myPromise = fetch("/api/data");

  toast.promise(
    myPromise,
    {
      pending: "Loading data...",
      success: "Data loaded successfully!",
      error: "Failed to load data",
    }
  );
};

// Method 3: Using in async functions
export const exampleAsyncUsage = async () => {
  try {
    // Show loading toast
    const toastId = toast.loading("Processing...");

    // Simulate async operation
    await new Promise((resolve) => setTimeout(resolve, 2000));

    // Update to success
    toast.update(toastId, {
      render: "Process completed!",
      type: "success",
      isLoading: false,
      autoClose: 5000,
    });
  } catch (error) {
    // Update to error
    toast.update(toastId, {
      render: "Process failed!",
      type: "error",
      isLoading: false,
      autoClose: 5000,
    });
  }
};

// Example: Component with toast notifications
import React, { useState } from "react";

const ExampleComponent = () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    try {
      setLoading(true);
      
      // Your API call here
      const response = await fetch("/api/example", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ data: "example" }),
      });

      if (!response.ok) throw new Error("Request failed");

      notify.success("Data submitted successfully!");
    } catch (error) {
      notify.error(error.message || "Failed to submit data");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={loading}>
        {loading ? "Submitting..." : "Submit"}
      </button>
    </div>
  );
};

export default ExampleComponent;
