import { useState, useEffect} from 'react'
import { useLocation } from 'react-router-dom';
import { Loader, Search } from "lucide-react"
import HeaderMenu from '@/layout/HeaderMenu'
import HeaderMenuComponents from '@/layout/HeaderMenu.component'
import HeaderMenuBreadCrumb from '@/layout/HeaderMenu.breadcrumb'
import Footer from '@/layout/Footer'
import { useSearchData } from '@/reducer/linkFetchReducer' 
import SearchBar from '@/layout/SearchBar.component'
import ProgressBar from '@/layout/ProgressBar';

function Layout({ children }) {
  const [searchQuery, setSearchQuery] = useState('')
  const [triggerSearch, setTriggerSearch] = useState(false)
  const [debouncedQuery, setDebouncedQuery] = useState('')
  const { loading, searchContent, error } = useSearchData(debouncedQuery, triggerSearch)
  const location = useLocation()

  const handleSearchSubmit = (query) => {
    document.body.style.cursor = "wait"
    setSearchQuery(query)
    setTriggerSearch(true)
  };

  const handleInputChange = (event) => {
    setSearchQuery(event.target.value)
  };

  const handleSubmit = (event) => {
    event.preventDefault()
    handleSearchSubmit(searchQuery)
  };

    useEffect(() => {
      const delayDebounceFn = setTimeout(() => {
        setDebouncedQuery(searchQuery);  
      }, 800);

      return () => clearTimeout(delayDebounceFn); 
    }, [searchQuery]);

    useEffect(() => {
      setSearchQuery('');
      setTriggerSearch(false);
    }, [location.pathname]); 

    useEffect(() => {
      if (searchQuery === '') {
        setTriggerSearch(false);
      }
    }, [searchQuery]);

    useEffect(() => {
      if (!loading) {
        document.body.style.cursor = "default";
      }
    }, [loading]);

    useEffect(() => {
      const timer = setTimeout(() => {
        document.body.style.cursor = "default";
      }, 900);
      return () => clearTimeout(timer);
    }, []);

  return (
    <>
      <div className="grid min-h-screen w-full md:grid-cols-[250px_1fr] lg:grid-cols-[250px_1fr] dark:text-white">
        <ProgressBar />
        <HeaderMenu />
        <div className="flex flex-col">
          <HeaderMenuComponents >
          <SearchBar onSearchSubmit={handleSearchSubmit} />
          </HeaderMenuComponents>
          <HeaderMenuBreadCrumb />
          {triggerSearch && searchContent ? (
            loading ? (
              <div className="flex items-center justify-center h-full">
                <Loader className='loading'/>
              </div>
            ) : error ? (
              <div>Error: {error}</div>
            ) : (
              <>
                <div id='sch_res_ov' className='top-search-bar'>
                  <form onSubmit={handleSubmit}>
                    <div className="relative">
                      <Search className="absolute border-0 left-1 top-2 h-4 w-4 text-muted/40" />
                      <div className='flex flex-row w-auto justify-between'>
                        <input 
                          className='flex-1 border-0 focus:outline-none appearance-none bg-neutral-500/40 pl-8 shadow-none transition duration-150 ease-in-out'
                          value={searchQuery} 
                          onChange={handleInputChange} />
                        <button type='submit' className='inline-flex'> Search </button>
                      </div>
                    </div>
                  </form> 
                </div>
                {searchContent}
              </>
            )
          ) : (
            <>
              {children}
            </>
          )}
          <Footer />
        </div>
      </div>
   </>
  )
}

export default Layout