/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import React, { useState, useRef, useEffect, useCallback } from "react"
import { navigate } from "gatsby"
import cls from "classnames"

import { Input } from "./input"
import { Container } from "@/components"
import EmptyList from "@/components/empty-list"
import t from "@/constants/wording"

import * as styles from "./index.module.scss"

export const Results = ({ searchResults: res, children }: any) => {
  return res && res.length > 0 ? (
    children
  ) : (
    <div className="p-5">
      <EmptyList />
    </div>
  )
}

const HeaderSearch = () => {
  const inputContainer = useRef<HTMLDivElement>(null)
  const [query, setQuery] = useState("")
  useEffect(() => {
    const input = inputContainer.current!.querySelector("input")
    input?.focus()
  }, [])

  const changeVal = (q: string) => {
    setQuery(q)
  }
  const keyHandle = (e: KeyboardEvent) => {
    if (e.key === "Enter") {
      navigateFun()
    }
  }
  const navigateFun = useCallback(() => {
    if (typeof window !== "undefined" && query) {
      const { pathname } = window.location
      const url = `/search?keywords=${query}`
      if (pathname.toLowerCase().includes("/search")) {
        location.href = url
      } else {
        navigate(url)
      }
    }
  }, [query])
  return (
    <Container className={styles.searchContainer} isSmall>
      <div
        ref={inputContainer}
        className={cls(styles.inputContainer, "is-centered")}
      >
        <div className={cls(styles.form)}>
          <div className={styles.inputWrapper}>
            <Input onChange={changeVal} value={query} keyHandle={keyHandle} />
          </div>

          <button className="button is-primary ml-4" onClick={navigateFun}>
            {t("search")}
          </button>
        </div>
      </div>
    </Container>
  )
}

export default HeaderSearch