"use client";

import useSWR from "swr";

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function ClientComponent({ slugFromParrent }) {
  const { data, error, isValidating } = useSWR(
    `http://localhost:3000/Api/wines`,
    fetcher,
    {
      revalidateOnFocus: false, // Disable revalidation when the window gains focus
      revalidateOnReconnect: false, // Disable revalidation when the browser reconnects to the network
      refreshInterval: 0, // No polling, meaning no automatic refreshes at intervals
      dedupingInterval: 10000, // Avoid duplicate requests within 10 seconds
      shouldRetryOnError: false, // Disable retry on error
      refreshWhenHidden: false, // Do not refresh when the tab is hidden
      refreshWhenOffline: false, // Do not refresh when the browser is offline
      revalidateIfStale: true, // Revalidate if cached data is stale
      revalidateOnMount: true, // Revalidate when the component mounts
      fallback: {}, // Provide initial data when there's no cache (static fallback)
      fallbackData: [], // Similar to fallback, but specific to this fetch
      focusThrottleInterval: 5000, // Throttle revalidation on focus, allowing one revalidation per 5 seconds
      compare: (a, b) => a === b, // Function to compare fetched data to decide whether to update state
      errorRetryCount: 3, // Number of retry attempts when an error occurs
      errorRetryInterval: 5000, // Time in milliseconds before retrying after an error
      initFocus: () => {}, // Custom function to detect focus (can override SWR's default focus detection)
      initReconnect: () => {}, // Custom function to detect reconnect (can override SWR's default reconnect detection)
      isOnline: () => true, // Custom function to check if the user is online
      isPaused: () => false, // Custom function to pause revalidation (if it returns true)
      isVisible: () => true, // Custom function to check if the tab is visible
      keepPreviousData: false, // Keep the previous data while fetching new data (can be useful to avoid flashing/loading states)
      loadingTimeout: 3000, // Time in milliseconds to trigger the `onLoadingSlow` callback if loading takes too long
      onDiscarded: () => {}, // Callback when a request is discarded (due to deduping, etc.)
      onError: (err) => console.error(err), // Callback when an error occurs
      onErrorRetry: (err, key, config, revalidate, { retryCount }) => {
        // Custom retry logic on error
        if (retryCount >= 3) return; // Stop retrying after 3 attempts
        setTimeout(() => revalidate({ retryCount }), 5000); // Retry after 5 seconds
      },
      onLoadingSlow: () =>
        console.warn("Loading is taking longer than expected"), // Callback when loading takes too long
      onSuccess: (data) => console.log("Data fetched successfully", data), // Callback when data is fetched successfully
      provider: () => new Map(), // Custom cache provider (you can use a different storage like IndexedDB, etc.)
      suspense: false, // If set to true, it enables React Suspense for data fetching
      use: [(middleware) => middleware], // Array of middleware functions (can modify behavior like adding authentication headers)
    }
  );

  if (error) return <p>Oops something went wrong...</p>;
  if (isValidating) return <p>Loading wines...</p>;

  const wine = data.find((wine) => wine.id == Data);

  if (!wine)
    return (
      <>
        <p>No wine found</p>
        <p>search between 1 - 718</p>
      </>
    );

  return (
    <div>
      <img src={wine.image} alt={wine.winery} />
      <h1>{wine.winery}</h1>
      <p>Location: {wine.location}</p>
      <p>ID: {wine.id}</p>
    </div>
  );
}