import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
import Link from "next/link"
import { useRouter } from 'next/router'
import { ENV_VAR } from '../../../envconfig'


const result = ({data}) => {

    const router = useRouter()
    console.log(data)
    const {book, writer, text} = data._source
    const nextPageHandler = () => {
        if(Number(data._id) + 1 === Number(data._source.numOfPages) + 1) return

        router.push(`/${book.toLowerCase()}/${Number(data._id) + 1}`)
    }

    const prevPageHandler = () => {
        if(data._id - 1 === 0) return

        router.push(`/${book.toLowerCase()}/${Number(data._id) - 1}`)
    } 

  return (
    <>
        <div className="flex flex-col laptop:flex-row flex-wrap items-end w-[100vw] laptop:w-[84vw] laptop:min-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-[5vh]
                min-w-[90vw]n
                w-[90vw]
                bg-[#202124]
                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 text-[#fff] px-3 py-auto' onClick={() => prevPageHandler()}><AiOutlineLeft size={25} /></i>
                <p className="text-base tablet:text-2xl laptop:text-2xl text-[#fff] font-serif text-center">"{book}", {writer}, str.{data._id}</p>
                <i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => nextPageHandler()}><AiOutlineRight size={25} /></i>
            </div>
            <div className='page flex laptop:justify-center laptop:min-w-[100%]'>
                <p className='
                    min-w-[90vw]
                    w-[100%]
                    px-5
                    mt-8
                    pb-[5rem]

                    tablet:w-[100%]
                    tablet:px-[5rem]

                    laptop:min-w-[45vw]
                    laptop:w-[60vw]

                    text-white
                    font-serif
                    text-2xl
                    '
                >
                    {text}
                </p>
            </div>
        </div>  
    </>
  )
}

export default result

export async function getServerSideProps (context) {
    
    try{
    const res = await fetch(`${ENV_VAR}library${context.resolvedUrl}`)
    const data = await res.json()

    return { props: {data} }
    }
    catch{err => console.log(err)}

    
}