import { MainLayout } from "@/layout/MainLayout/MainLayout";
import styles from "./styles.module.css";
import Link from "next/link";
import { ConditionalNull, ConditionalParent } from "@/components/utility/Conditional";
import Searchbar from "@/components/Searchbar/Searchbar";
// 

export default async function Home({
  searchParams
}:{
  searchParams: { 
    q: string,
    page: string
   }
}) {
  const curPage = parseInt(searchParams?.page) || 1;
  const searchResults = await fetch(`https://s.abtmtr.link/search?q=${searchParams.q}&pageno=${curPage}&format=json`, {
    headers: [
      ["Accept", "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"]
    ]
  }).then(x => x.json());
  return (
    <MainLayout currentPage="/search/search/" title="Search" subtitle={`Results for "${searchParams.q}"`} backButton>
      <Searchbar value={searchParams.q} />
      <div className={styles.SearchInfoboxes}>
        {searchResults.infoboxes?.map((box:{
          infobox: string,
          attributes?: {
            label: string,
            value?: string,
            image?: {
              src: string,
              alt: string,
              title: string,
              width: number,
              height: number,
              type: string,
              themes: string,
              colorinvertable: boolean,
              contenttype: string
            }
          }[],
          id?: string,
          content?: string,
          img_src?: string,
          urls: {
            title: string,
            url: string
          }[],
          engine: string,
          engines: string[]
        }) => {
          return (
            <div className={styles.SearchInfobox}>
              <h2>{box.infobox}</h2>
              <ConditionalParent
                condition={box.img_src != null && box.img_src.length > 0}
                parent={(x => (
                  <div className={styles.SideBySideImage}>
                    <img src={box.img_src} />
                    {x}
                  </div>
                ))}
              >
                <ConditionalNull condition={box.content != null}>
                  <div>
                    <small><a href={box.id}>{box.id}</a></small><br />
                    <p>{box.content}</p>
                  </div>
                </ConditionalNull>
              </ConditionalParent>
              {box.attributes?.map(attribute => (<div>
                <p><b>{attribute.label}</b></p>
                <ConditionalNull condition={attribute.value != null}>
                <p>{attribute.value}</p>
                </ConditionalNull>
                <ConditionalNull condition={attribute.image != null}>
                  <img 
                    src={attribute.image?.src}
                    alt={attribute.image?.alt}
                    title={attribute.image?.title}
                    height={attribute.image?.height}
                    width={attribute.image?.width}
                  ></img>
                </ConditionalNull>
              </div>))}
              {box.urls.map(url => (<p>
                <a href={url.url}>{url.title}</a>
              </p>))}
              <small>{box.engines?.join(" ") ?? box.engine}</small>
            </div>
          );
        })}
      </div>
      {searchResults.results?.map((result:{
        url: string,
        title: string,
        content?: string,
        img_src?: string,
        engine: string,
        parsed_url: string[],
        engines: string[],
        positions: number[],
        score: number,
        category: string
      }) => {
        const content = result.content?.match(/^.+?(?:\.|$)/m);
        return (
          <div className={styles.SearchResult}>
            <p>
              <Link href={result.url}>{result.title}</Link>
              <br />
              <small>{result.url}</small>
            </p>
            <ConditionalParent
              condition={result.img_src != null && result.img_src.length > 0}
              parent={(x => (
                <div className={styles.SideBySideImage}>
                  <img src={result.img_src} />
                  {x}
                </div>
              ))}
            > 
              <div>
                <ConditionalNull condition={content != null}>
                <i>"{content?.[0].replace(/"/g, "")}"</i><br />
                </ConditionalNull>
                <small>{result.engines?.join(" ") ?? result.engine}</small>
              </div>
            </ConditionalParent>
          </div>
        )
      })}
      <div className="navigation">
        <ConditionalNull condition={curPage > 1}>
          <Link href={`?q=${searchParams.q}&page=${curPage - 1}`}>Previous</Link>
        </ConditionalNull>
        <ConditionalNull condition={searchResults.results?.length > 0}>
          <Link href={`?q=${searchParams.q}&page=${curPage + 1}`}>Next</Link>
        </ConditionalNull>
      </div>
    </MainLayout>
  )
}