// 'use client'
// import { useRouter } from 'next/router';
// import { FC, useEffect, useState } from 'react';
// import MagazineApis from '../../utils/MagazineApis';
// import { Category } from '../../types';
// import PostsList from '../../components/PostsList/PostsList';
// import {useSearchParams } from 'next/navigation';

// const CategoryListPosts:FC = () => {

//   const searchParams = useSearchParams()
//   const router = useRouter();
//   const { locale} = router;

//   const query = searchParams.get('query') ?? "";
//   const currentPage = Number(searchParams?.get('page')) || 1;

//   console.log("currentPage",currentPage)
//   const SearchResult = 'نتائج البحث'

//   const [postsLists, setCategory] = useState<Category[]>([]);
//   const [LatestNewsPost, setLatestNewsPost] = useState<Category[]>([]);

//   useEffect(() => {
//     if (query) {
//       getPostSearch(query,currentPage,locale);

//     }
//     geLatestNewsPost(locale)
//   }, [query,currentPage,locale]);

//   const getPostSearch = (searchKey: string | string[], pageNuber:number,locale:any) => {
//     MagazineApis.getPostSearch(searchKey,pageNuber,locale).then(
//       res => {
//         console.log("category", res.data.data)
//         setCategory(res.data.data)

//       }
//     );
//   };

//   const geLatestNewsPost = (locale:any) => {
//     MagazineApis.getNumberOfPostByCategoryName('news',5,locale).then(
//       res => {
//         console.log("geLatestNewsPost", res.data.data)
//         setLatestNewsPost(res.data.data)
//       }
//     );
//   };

//   return (
//    <div>
//     <PostsList posts={postsLists} postsListName={SearchResult} latestNewsPost={LatestNewsPost} />
//     </div>
//   );
// };

// export default CategoryListPosts;

import * as React from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import { formatDate } from '../../utils';
import { DrupalNode } from 'next-drupal';
import Head from 'next/head';
import Image from 'next/image';

export default function SearchPage() {
    const [status, setStatus] = React.useState<'error' | 'success' | 'loading'>();
    const [results, setResults] = React.useState<DrupalNode[]>([]);

    const { t } = useTranslation();
    const router = useRouter();
    const { locale } = router;
    const [keys, setKeys] = React.useState<string>('');

    async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
    
        setStatus('loading');
    
        const formData = new FormData(event.currentTarget);
        const keywords = formData.get('keywords') as string;
    
        const response = await fetch('/api/search/default_index', {
            method: 'POST',
            body: JSON.stringify({
                params: {
                    fields: {
                        'node--article': 'id,title,created,field_image,drupal_internal__nid,field_category',
                    },
                    include: 'field_image,field_category',
                    filter: {
                        fulltext: keywords,
                    },
                },
                locale: router.locale,
                defaultLocale: router.defaultLocale,
            }),
        });
    
        if (!response.ok) {
            return setStatus('error');
        }
    
        setStatus('success');
    
        const results = await response.json();
        setResults(results);
    }
    

    // console.log(`Category: ${JSON.stringify(results[0].field_category)}`);

    return (
        <>
            <section className="bg-gradient-to-t from-white/60 to-transparent pt-28  py-12 dark:bg-none lg:py-36">
                <div className="container">
                    <div className="flex flex-col lg:items-start items-center gap-5 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">
                        <div className="lg:max-w-[890px]">
                            <div className="flex gap-3">
                                <div className="h-[30px] w-[5px] bg-secondary"></div>

                                <form onSubmit={handleSubmit} className="mb-4">
                                    <div className="items-center gap-4 sm:grid sm:grid-cols-7">
                                        <button
                                            type="submit"
                                            data-cy="btn-submit"
                                            className="flex justify-center w-full px-4 py-2 mt-4 text-sm font-medium text-white bg-black border border-transparent rounded-md shadow-sm sm:col-span-2 sm:mt-0 hover:bg-black"
                                        >
                                            {status === 'loading' ? 'Please wait...' : 'Search'}
                                        </button>
                                        <input
                                            type="search"
                                            placeholder="Search articles..."
                                            name="keywords"
                                            required
                                            className="relative block w-full col-span-5 px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm"
                                        />
                                    </div>
                                </form>
                            </div>

                            <div className="mt-5 flex flex-col gap-4 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20 md:flex-row lg:max-w-[890px]">
                                <div className="space-y-4">
                                    {status === 'error' ? (
                                        <div className="px-4 py-2 text-sm text-red-600 bg-red-100 border-red-200 rounded-md">
                                            An error occured. Please try again.
                                        </div>
                                    ) : null}
                                    {!results.length ? (
                                        <p className="text-sm" data-cy="search-no-results">
                                            No results found. Try searching for <strong>static</strong> or <strong>preview</strong>.
                                        </p>
                                    ) : (
                                        <div className="pt-4">
                                            <h3 className="mt-0" data-cy="search-results">
                                                Found {results.length} result(s).
                                            </h3>
                                            {results.map((node, index) => (
                                              
                                                <div key={node.id} className="max-w-inherit pt-4 group flex flex-col gap-[14px] lg:flex-row">
                                                    <div className="flex-none">
                                                        <div className="relative h-[210px] w-full overflow-hidden rounded-[10px] lg:h-full lg:w-[270px]">
                                                            {node.field_image?.uri && (
                                                                <div className="col-span-1 mb-4 sm:mb-0">
                                                                    <Image
                                                                        src={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${node.field_image.uri.url}`}
                                                                        width={200}
                                                                        height={110}
                                                                        alt={node.title}
                                                                        layout="responsive"
                                                                        objectFit="cover"
                                                                        className="h-full w-full object-cover"
                                                                    />
                                                                </div>
                                                            )}
                                                        </div>
                                                    </div>
                                                    <div className="flex-1">

                                                                <Link
                                                                     href={`/category/${node.field_category.drupal_internal__nid}/${node.drupal_internal__nid} `}
                                                                     className="text-lf font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
                                                                        >
                                                                            {node.title}
                                                                            {node.field_category.data}
                                                                        
                                                                        </Link>
                                                  
                                                        <div className="mt-2.5 flex items-center gap-2">
                                                            <p className="text-[13px] font-semibold"></p>
                                                            <span>
                                                                <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path
                                                                        d="M8 5.83325V8.49992L9.66667 10.1666"
                                                                        stroke="#969AA9"
                                                                        strokeWidth="1.5"
                                                                        strokeLinecap="round"
                                                                        strokeLinejoin="round"
                                                                    ></path>
                                                                    <path
                                                                        d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
                                                                        stroke="#969AA9"
                                                                        strokeWidth="1.5"
                                                                        strokeLinecap="round"
                                                                    ></path>
                                                                </svg>
                                                            </span>
                                                            {/* <p className="text-[13px] font-semibold">{formatDate(item.attributes.createdAt)}</p> */}
                                                            <p className="text-[13px] font-semibold">{formatDate(node.created)}</p>
                                                        </div>
                                                        <p className="mt-2.5 text-sm font-medium">
                                                            {/* {item.body.slice(0, 150)} {item.body.length > 150 ? '...' : ''} */}
                                                        </p>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>

                        {/* <LatestPostsListSection postsByCategory={latestNewsPost} latestPostsName={LatestPostName} /> */}
                    </div>
                </div>
            </section>

            <div className="container max-w-2xl px-6 py-10 mt-10 mx-auto">
                <article className="prose lg:prose-xl">
                    <p>Use the form below to search for article nodes.</p>
                </article>
            </div>
        </>
    );
}