import { React, useEffect, useState} from 'react'
import { useRouter } from 'next/router'

const Result = ({result, term}) => {

    const router = useRouter()
    const {book, writer, text} = result._source
    const [title, setTitle] = useState()
    let sentences

    const checkForMatches = (props) => {

      if(props.length === 1) return setTitle(props)
      if(props.length > 1 ){
      return sentences.map((sentence) => {
        if(sentence.toLowerCase().includes(term.toLowerCase())) setTitle(sentence)
        else setTitle(props[0])
      })
      }
      
    }

    const splitText = () => {
      try{
        return text.match( /[^\.!\?]+[\.!\?]+/g)
      }catch{err => console.log(err)}
    }

    useEffect(() => {
      sentences = splitText()
      checkForMatches(sentences)
    }, [])
    // ako term nije pronadjen u textu onda 
    // treba provjeriti duzinu niza, ako niz ima jednu recenicu, recenica treba biti title, ako ne, naci medju recenicama onu koja ima term u sebi


  return (
    <div onClick={() => (router.push({pathname: `/${result._type}/${result._id}`}))} className='
    self-end
    bg-[#202124] 
    w-[100%]
    laptop:max-w-[50vw]
    p-3 m-auto
    border-4
    border-[#303134]
    font-serif text-base 
    text-lg
    tablet:text-2xl text-white
    laptop:text-lg
    '
    >
        <p className='m-3'>{title}</p>
        <p className='m-3'>"{book}" - {writer} - str. {result._id}.</p>
    </div>
  )
}

export default Result