import Counter from "./counter.client"
import Love from "./love.server"

export default function Home() {
   return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
         <h1 className="text-6xl font-bold">Hello From Page (Server)!</h1>
         <Counter>
            <Love />
         </Counter>
      </main>
   )
}

"use client"
import { useState } from "react"

type Props = {
   children: React.ReactNode // A Server Component
}

export default function Counter({ children }: Props) {
   const [count, setCount] = useState(0)

   return (
      <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
         {/* This is just a indicator where to render the server component child. */}
         {children}
         {/* The client component does not know anything about the server component. */}
      </div>
   )
}

export default function Love() {
   // Don't use this check in production it will lead to hydration mismatch.
   // Just for educational purposes.
   if (typeof window !== "undefined") {
      return (
         <div>
            <h1>🤬</h1>
            <p>This is a client component.</p>
         </div>
      )
   }

   return (
      <div>
         <h1>🥰</h1>
         <p>This is a server component.</p>
      </div>
   )
}

const handleSort = async (params: any) => {
        setIsFiltering(true);
        const result: any = await filterTemplates(params);
        setIsFiltering(false);
        if (result?.templates?.length > 0) {
            setTemplates(result.templates);
            setTotalTemplates(result.totalTemplates);
        }
    };

    useEffect(() => {
        const sort = searchParams?.get("sort");
        const filter = searchParams?.get("filter");
        const search = searchParams?.get("search") || "";
        setSearchQuery(search);
        if ((sort || filter) && !search) {
            // if filter is empty and sort is newest then set default templates because
            // we are already load thr newest templates in server side
            if (sort === "latest" && !filter) {
                setTemplates(defaultTemplates);
                setTotalTemplates(props.totalTemplates);
                return;
            }
            handleSort({ sort, filter });
        }
        // if sort and filter is empty then set default templates
        if (!sort && !filter && !search) {
            setTemplates(defaultTemplates);
            setTotalTemplates(props.totalTemplates);
            return;
        } // if search is exist in url query then search get the highest priority
        if (search) {
            handleSearch(search);
        }
    }, [searchParams]);