---
// Layout
import Search from "@layouts/Search.astro";

// Configuration
import {
  DEFAULT_API,
  DEFAULT_IMAGE_PROXY
} from "@utils/GetConfig"

// Components
import Answer from "@components/search/Answer.astro";
import RelatedSearches from "@components/search/RelatedSearches.astro";
import WebLink from "@components/search/WebLink.astro";
import WebLinkSkeleton from "@components/search/WebLinkSkeleton.astro";
import { undefined } from "astro:schema";

// Fetch
const QueryString = Astro.url.href.split("web?=").pop() // Get user's search query from URL
const QueryText = `${QueryString}`.replaceAll("%20", " ") // Replace "%20" with a space
const Query = await fetch(DEFAULT_API + "/api/v1/web?s=" + QueryString).then((response) => response.json()); // Response

// Toggle Functions
if (Query.answer[0] === undefined) {
  var ShowAnswer = false
} else {
  var ShowAnswer = true
}
if (Query.related[0] === undefined) {
  var ShowRelated = false
} else {
  var ShowRelated = true
}
console.log(ShowRelated + '' + Query.related[0])
---

<Search QueryText={QueryText} Type="Web">
    <slot slot="search">
        <div class="search-web-with-images">
          {Query.image.map((img) => (
              <a href={DEFAULT_IMAGE_PROXY + '/' + img.source[0].url} target="_blank"><img style="opacity: 0; transition: 1s opacity;" src={DEFAULT_IMAGE_PROXY + '/' + img.source[0].url} onload="this.style.opacity = '1'"/></a>
          ))}
        </div>
        {Query.web.map((query) => (
            <WebLink
                server:defer
                Title={query.title}
                Description={query.description}
                Link={query.url}
            >
                <WebLinkSkeleton slot="fallback"/>
                <slot slot="sublinks">
                  {query.sublink.map((link) => 
                    <a href={link.url}>
                      <p style="font-size: 18px; text-decoration: none;">{link.title}</p>
                      <p style="font-size: 14px;">{link.url}</p>
                    </a>
                  )}
                </slot>
            </WebLink>
        ))}
    </slot>
    <slot slot="rich-panel">
        {ShowAnswer ?
          <Answer
            Image={Query.answer[0].thumb}
            Link={Query.answer[0].url}
            Title={Query.answer[0].title}
            Description={Query.answer[0].description[0].value}
          ></Answer>
          :
          null
        }
        {ShowRelated ?
          <RelatedSearches server:defer>
              {Query.related.map((related) => (
                  <a href={'/web?=' + related}>{related}</a>
              ))}
              <slot slot="fallback">
                  <div class="fade-up small-grid-related">
                      <a class="related-sk"></a>
                      <a class="related-sk"></a>
                      <a class="related-sk"></a>
                      <a class="related-sk"></a>
                      <a class="related-sk"></a>
                  </div>
              </slot>
          </RelatedSearches>
          :
          null
        }
        <a style="font-size: 12px;" href={DEFAULT_API + "/api/v1/web?s=" + QueryString} target="_blank">JSON Response</a>
    </slot>
</Search>

<style lang="scss">
@keyframes wave-lines {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@keyframes wave-squares {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.small-grid-related {
    display: flex;
    flex-wrap: wrap;
}
.fade-up {
  mask-image: linear-gradient(white, transparent);
}
.related-sk {
    box-shadow: 0px 4px 10px 0px #0000000a;
    background: linear-gradient(to right,rgba(164, 164, 164, 0.2) 8%,rgba(241, 238, 238, 0.3) 18%,rgba(155, 155, 155, 0.2) 33%);
    background-size: 150px 1px;
    animation: wave-lines 10s infinite ease-out;
    padding: 12px 64px;
    margin-bottom: 6px;
    margin-right: 6px;
}

.search-web-with-images {
  display: grid;
  gap: 12px 0px;
  grid-template-columns: repeat( 4, minmax(100px, 1fr));
  margin-bottom: 12px;
  img {
    width: 182px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px rgb(170,170,170) solid;
  }
}
</style>