import React, { useState } from 'react'
import Results from '../components/Results'
import { AiOutlineClose, AiOutlineSearch } from 'react-icons/ai'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { ENV_VAR } from '../envconfig'


const SearchPage = ({data}) => {
  const router = useRouter()
  const [searchInput, setSearchInput] = useState(router.query.term)
  const term = searchInput

  const search = () => {
    if(!term) return
    router.push(`/search?term=${term}`)
  }

  const enterHandler = (e) => {
    if(e.key === "Enter" && term !== "") router.push(`/search?term=${term}`)
  }

  return (
    <div className='flex flex-col justify-center'>
        <div className="flex flex-col laptop:flex-row flex-wrap items-start w-[100vw] laptop:w-[80vw] laptop:h-[20vh] laptop:max-w-[90vw]">
            <div className="p-10 w-[100vw] laptop:w-[25rem]">
                <Link href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></Link>
            </div>
            <div className="group
                my-3
                mx-auto
                py-5
                h-[4vh]
                min-w-[90vw]
                bg-[#303134]
                border-[1px] w-[90vw] border-[#bdc1c6] rounded-3xl 
                flex flex-row justify-around items-center

                tablet:w-[70vw]

                laptop:min-w-[40vw]
                laptop:w-[40vw]
                laptop:mx-0
                laptop:my-10
                laptop:justify-between
                "
            >
                <i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
                <input onKeyDown={(e) => enterHandler(e)} value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="bg-[#303134] ml-5 w-[70%] active:border-none text-white outline-none text-lg "/>
                <i className='rounded-3xl text-[#9aa0a6] px-3' onClick={() => setSearchInput("")}><AiOutlineClose size={25} /></i>
            </div>
        </div>
        <Results  data={data.hits.hits} term={searchInput}/>
    </div>
  )
}

export async function getServerSideProps(context) {
    // Fetch data from external API
    const res = await fetch(`${ENV_VAR}_search?q=${context.query.term}`)
    const data = await res.json()
  
    // Pass data to the page via props
    return { props: { data } }
  }

export default SearchPage