import { Link, graphql, useStaticQuery, PageProps } from 'gatsby'
import * as React from 'react'
import { useFlexSearch } from 'react-use-flexsearch'

import Layout from '../components/layout'
import Seo from '../components/seo'

import { Section } from '../components/shared'
import {
  SectionHeading,
  SectionDesc,
  SolidButton
} from '../components/shared/styledComponents'

import Post from './postpreview'
import { SideBar } from './sidebar'

import type { PageContext, PostNode, SearchPost } from '../types'

interface SearchData {
  localSearchBlog: {
    index: string
    store: Record<string, unknown>
  }
}

const BlogSearchTemplate: React.FC<PageProps<SearchData, PageContext>> = ({
  location,
  pageContext
}) => {
  const queryData = useStaticQuery(graphql`
    query {
      localSearchBlog {
        index
        store
      }
    }
  `)

  const params = new URLSearchParams(location.search.substring(1))
  const query = params.get('s')

  const posts = useFlexSearch(
    query,
    queryData.localSearchBlog.index,
    queryData.localSearchBlog.store
  ) as SearchPost[]
  const postsJSX: React.ReactElement[] = []

  if (query) {
    posts.forEach((post, i) => {
      const _post: PostNode = {
        id: post.id,
        html: post.html,
        fields: {
          slug: post.slug
        },
        frontmatter: {
          title: post.title,
          date: post.date,
          previewImg: post.previewImg as PostNode['frontmatter']['previewImg']
        }
      }

      postsJSX.push(<Post key={i} post={_post} />)
    })
  }
  return (
    <Layout
      location={location}
      heading="Data Controller’s Knowledge Base"
      desc="A section dedicated to news, updates and educational pieces."
    >
            <Section color="black" bgColor="white" bottomArrow={false}>
        <div className="row">
          <div className="col-md-7">
            <div className="row">
              {query ? (
                <h1>
                  {postsJSX.length} results found related to &quot;{query}&quot;
                </h1>
              ) : (
                <h1>No Query Entered</h1>
              )}
              {postsJSX}
            </div>
          </div>
          <div className="col-md-5">
            <SideBar pageContext={pageContext} location={location} />
          </div>
        </div>
      </Section>
    </Layout>
  )
}

export default BlogSearchTemplate

export const Head = () => <Seo title="Blog" />