import classNames from 'classnames';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { FC, Fragment, useEffect, useState } from 'react';

type SidebarProps = { categories?: any[]; tags?: any[]; archieves?: any[] };

const Sidebar: FC<SidebarProps> = ({ categories, tags, archieves }) => {
  const router = useRouter();
  const { category, tag, archieve, search } = router.query;
  const [inputValue, setInputValue] = useState<string>(search ? String(search) : '');
  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      if (inputValue) {
        router.push(`/blog?search=${encodeURIComponent(inputValue || '')}`);
      } else {
        router.push(`/blog`);
      }
    }
  };
  useEffect(() => {
    // Ensure the input value is always a string, fallback to empty string if search is undefined
    setInputValue(search ? String(search) : '');
  }, [search]);
  return (
    <Fragment>
      <div className="widget tw-relative">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          className="tw-w-full tw-text-base tw-text-secondary-dark focus:tw-text-secondary-dark tw-py-2 tw-px-4 tw-pr-10 tw-border tw-border-[#D4D4D4] tw-rounded-md tw-shadow-sm tw-outline-none focus:tw-ring-2 focus:tw-ring-main-color"
          placeholder=""
          onKeyDown={handleKeyDown}
        />
        <i className="uil tw-text-xl uil-search tw-absolute tw-right-3 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-text-[#D4D4D4]"></i>
      </div>
      <div className="widget">
        <h4 className="tw-font-ibm tw-font-bold tw-text-main-dark tw-text-sm md:tw-text-base mb-3">
          {router?.locale === 'es' ? 'Categorías' : 'Categories'}
        </h4>

        <ul className="unordered-list  ">
          {categories &&
            categories.map((cat, key) => (
              <li key={key} className="tw-text-[#979797]">
                <Link
                  href={'/blog?category=' + cat?.slug}
                  className={classNames(
                    { 'tw-text-main-color': category && category === cat?.slug },
                    { 'tw-text-[#979797]': !category || category !== cat?.slug },
                    'tw-font-ibm  tw-uppercase tw-text-xs md:tw-text-sm hover:tw-text-main-color tw-font-semibold'
                  )}
                >{`${cat?.name} (${cat?.totalBlogs})`}</Link>
              </li>
            ))}
        </ul>
      </div>
      <div className="widget">
        <h4 className="tw-font-ibm tw-font-bold tw-text-main-dark tw-text-sm md:tw-text-base mb-3">Tags</h4>

        <ul className="list-unstyled tag-list">
          {tags &&
            tags.map(({ id, name, slug }) => (
              <li key={id}>
                <Link
                  href={'/blog?tag=' + slug}
                  className={classNames(
                    { 'tw-text-main-color tw-border-main-color': tag && tag === slug },
                    'hover:tw-text-main-color hover:tw-border-main-color tw-border tw-border-[#979797] tw-text-[#979797] tw-px-3 tw-py-2 rounded-pill'
                  )}
                >
                  {name}
                </Link>
              </li>
            ))}
        </ul>
      </div>
      <div className="widget">
        <h4 className="widget-title mb-3 tw-font-ibm tw-font-bold tw-text-main-dark tw-text-sm md:tw-text-base">
          {router?.locale === 'es' ? 'Archivo' : 'Archieve'}
        </h4>

        <ul className="unordered-list ">
          {archieves &&
            archieves.map(({ title, value }, key) => (
              <li key={key} className="tw-text-[#979797]">
                <Link
                  className={classNames(
                    { 'tw-text-main-color': archieve && archieve === value },
                    { 'tw-text-[#979797]': !archieve || archieve !== value },
                    'tw-font-ibm tw-capitalize tw-text-xs md:tw-text-sm hover:tw-text-main-color tw-font-semibold'
                  )}
                  href={'/blog?archieve=' + value}
                >
                  {title}
                </Link>
              </li>
            ))}
        </ul>
      </div>
    </Fragment>
  );
};

export default Sidebar;