import { labels } from '@/app/constants/labels';
import { SearchResult, commonSearch } from '@/lib/search';
import closeIcon from '@/public/assets/images/close.svg';
import searchIcon from '@/public/assets/images/search.svg';
import { Dialog } from '@headlessui/react';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
import SpinnerLoader from '../../atoms/SpinnerLoader';
import { ROUTES } from '@/app/constants/routes';

interface SearchModalProps {
  show: boolean;
  onHide: () => void;
  language: string;
}

const SearchModal = (props: SearchModalProps) => {
  const { show, onHide, language } = props;
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);
  const [pageLoading, setPageLoading] = useState(false);
  const [query, setQuery] = useState<string>('');
  const debounceTimer: any = useRef(null);
  const [suggestions, setSuggestions] = useState<SearchResult[] | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const router = useRouter();
  const pathname = usePathname();

  const onClose = () => {
    setSuggestions([]);
    setQuery('');
    router.push(pathname);
    onHide();
  };

  useEffect(() => {
    setPageLoading(false);
  }, [pathname]);

  const handleNavigte = useCallback((e: any, url: string) => {
    e.preventDefault();
    setPageLoading(true);
    router.push(url);
    onHide();
    setSuggestions([]);
    setQuery('');
  }, []);

  const handleChange = async (event: ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setQuery(value.trim());

    if (value) return router.push(`${pathname}?q=${value}`);
    if (!value) {
      setSuggestions([]);
      return router.push(pathname);
    }
  };

  const handleSearch = () => {
    if (query) return router.push(`${pathname}?q=${query}`);
    if (!query) return router.push(pathname);
  };

  const handleKeyPress = (event: { key: any }) => {
    if (event.key === 'Enter') return handleSearch();
  };

  const fetchData = async () => {
    const searchRes: SearchResult[] | null = await commonSearch(
      language,
      query
    );
    setSuggestions(searchRes);
    setLoading(false);
    setSearched(true);
    return searchRes;
  };

  const handleInputChange = () => {
    clearTimeout(debounceTimer.current);
    debounceTimer.current = setTimeout(() => {
      setLoading(true);
      setSuggestions(null);
      fetchData();
    }, 500);
  };

  useEffect(() => {
    if (show && inputRef.current) {
      inputRef.current.focus();
    }
    if (show && query.length > 0) {
      handleInputChange();
    }
  }, [show, query]);

  useEffect(() => {
    // console.log({ suggestions });
  }, [loading, setLoading, suggestions, setSuggestions]);

  useEffect(() => {
    // console.log({ pageLoading });
  }, [pageLoading, setPageLoading, searched, setSearched]);

  return (
    <>
      {pageLoading ? (
        <div className='pageLoding'>
          <SpinnerLoader />
        </div>
      ) : (
        <></>
      )}
      <Dialog open={show} onClose={onClose} className='relative z-50'>
        <div className='fixed inset-0 bg-white' aria-hidden='true' />
        <div className='fixed inset-0 flex w-screen justify-center p-4 mt-[19vh]'>
          <Dialog.Panel className='mx-auto rounded bg-white'>
            <button
              onClick={onClose}
              className='fixed top-0 right-0 z-51 bg-yellow-500 rounded-full p-2.5 md:p-3 lg:p-3'
            >
              <Image
                src={closeIcon}
                alt='Close'
                className='h-5 md:h-[30px] lg:h-8 w-5 md:w-[30px] lg:w-8'
              />
            </button>

            <div className='w-[60vw] sm:w-[80vw] bg-yellow-100 px-2.5 pb-2 rounded-lg max-h-[70vh]'>
              <div className='flex flex-row items-center p-1'>
                <label htmlFor='inputId' className='mr-6 sm:mr-2'>
                  <Image
                    src={searchIcon}
                    alt='Search'
                    className='lg:w-6 md:w-[22.514px] sm:w-4'
                  />
                </label>

                <input
                  type='text'
                  id='inputId'
                  ref={inputRef}
                  placeholder={labels[language].SEARCH}
                  value={query ?? ''}
                  onChange={handleChange}
                  onKeyDown={handleKeyPress}
                  className='bg-transparent text-xs md:text-base lg:text-lg text-black outline-none border-none w-full py-3 pl-0 pr-3'
                />
              </div>
              <ul className='border-b mb-6 md:mb-4 sm:mb-3 max-h-[55vh] overflow-y-auto'>
                {loading ? (
                  <li>
                    {' '}
                    <SpinnerLoader />{' '}
                  </li>
                ) : (
                  <></>
                )}
                {suggestions && suggestions?.length > 0 ? (
                  suggestions?.map((suggestion: any, index: number) => (
                    <li
                      key={index}
                      className='bg-transparent text-xs md:text-base lg:text-lg text-black/[.60] border-t border-black/[.60] w-full py-3 cursor-pointer'
                    >
                      <Link
                        onClick={(e) => {
                          const url =
                            `/${language}/` +
                            suggestion.url +
                            (suggestion?.id
                              ? '?id=' +
                                suggestion.id +
                                (suggestion?.category_title
                                  ? '&title=' + suggestion.category_title
                                  : '')
                              : '');
                          handleNavigte(e, url);
                        }}
                        href={'javascript:void(0)'}
                      >
                        {suggestion?.title || ''}
                      </Link>
                    </li>
                  ))
                ) : (
                  !loading && searched ? <li>
                    <p className='flex flex-row justify-center text-md my-5'>
                      No Data Found!!
                    </p>
                  </li>
                  : <></>
                )}
              </ul>
            </div>
            {suggestions && suggestions?.length > 0 ? (
              <div className='flex justify-center items-center mt-[2rem] md:mt-[100px] sm:mt-[72.09px]'>
                <Link
                  onClick={onHide}
                  href={`/${language}/${ROUTES.NEWS}?q=${query}`}
                >
                  <button className='btn-primary'>
                    {labels[language].VIEW_ALL}
                  </button>
                </Link>
              </div>
            ) : null}
          </Dialog.Panel>
        </div>
      </Dialog>
    </>
  );
};

export default SearchModal;