text: import React, {useState, useEffect} from 'react'
  import $ from 'jquery'
  import Searchbar from './main/searchbar'
  import Mainview from './main/mainview'
  import Contact from './main/contact'
  import About from './main/about'
  import Game from './main/game'
  import Cancel from './svg/cancel'
  import Logo from './svg/logo'
  import './main.css'
  
  const Main = (props) => {
  
     
      const [state, setState] = useState({
          input: "",
          properties: [false, true, true, false],
          recent: ['example'],
          word : {},
          pos: [],
          posCurrent: ""
      })
  
      useEffect(() => {
        //  take to the mainview
        if($("aside.search .toggle-props").hasClass("expand") && $(window).width() <= 1334) {
           $("section.main .sidebar-main").css({"top" : "160px"})
           console.log(true)
        }
        else {
           $("section.main .sidebar-main").css({"top" : "105px"})
           console.log(false)
        }
        if($("aside.search .toggle-props").hasClass("expand") && $(window).width() <= 672) {
           $("section.main .sidebar-main").css({"top" : "141px"})
        }
        else {
           $("section.main .sidebar-main").css({"top" : "70px"})
        }
        //  which word property is active
        $("aside.search .toggle-props .props").each(function() {
           if(state.properties[$(this).index()] === true) {
              $(this).addClass("active")
           }
           else {
              $(this).removeClass("active")
           }
        })
      })
  
  
  
     //  search text
      const searchText = (text) => {
        props.currentPag("search")
        if(text !== "") {
           // add to recent search
           if(state.recent.length > 6)
              state.recent.shift()
  
           // doesnt add if already in recent search
           if(state.recent.includes(text))
              //  Run search
              runSearch(encodeURI(text), text)
           else
              //  Run search
              runSearch(encodeURI(text), text, true)
  
  
        }
      }
         //  Run search
         const runSearch = (text, str, recent = false) => {
           fetch(`https://wordsapiv1.p.rapidapi.com/words/${text.toLowerCase()}`, {
               "method": "GET",
               "headers": {
                 "x-rapidapi-key": `${process.env.REACT_APP_API_KEY}`,
                 "x-rapidapi-host": "wordsapiv1.p.rapidapi.com"
               }
             })
             .then(response => response.json())
             .then( data => {
              let tempPos = []
              if(data.hasOwnProperty('success'))
                 recent = false;
              else {
                 // get all part of speech
                 for(let x = 0; x < data.results.length; x++) {
                    if(!tempPos.includes(data.results[x].partOfSpeech) && (data.results[x].partOfSpeech !== null)) {
                       tempPos.push(data.results[x].partOfSpeech);
                    }
                 }
              }
              if(recent === true)
                 setState({...state, input: str, word: data, recent: [...state.recent, str.toLowerCase()], pos: [...tempPos], posCurrent: tempPos[0]})
              else
                 setState({...state, input: str, word: data, pos: [...tempPos], posCurrent: tempPos[0]})
             })
             .catch(err => {
               console.error(err);
             });
         }
  
     //  remove an item from recently searched
      const recentRemove = (text) => {
         let temp = state.recent.slice()
         temp.splice(state.recent.indexOf(text), 1)
        setState({...state, recent: temp})
     }
  
     // toggle word properties
     const propToggle = (index) => {
        let temp = state.properties.slice()
        temp[index-1] = !temp[index-1]
        setState({...state, properties: temp})
     }
  
      return (
          <section className="main">
              {props.currentPage !== "search" ? 
              <section className="sidebar-main">
                 {props.currentPage === "contact"? <Contact /> : ""}
                 {props.currentPage === "intro"? <About /> : ""}
                 {props.currentPage === "game"? <Game /> : ""}
                 <Cancel onClick={(e)=>{e.stopPropagation(); return props.currentPag("search")}}/>
              </section> : ""}
  
              { !$.isEmptyObject(state.word) ? (!state.word.hasOwnProperty('success') ? <Mainview btnClick={searchText} result={state}/> : <div className="notFOund">Word does not exist</div>) : <Logo />}
              <Searchbar btnClick={searchText} recent={state.recent} recentRemove={recentRemove} propToggle={propToggle}/>
          </section>
      )
  }
  
  export default Main