import cx from "classnames";

import {
  CLASS_CAPTION,
  CLASS_INPUT,
  CLASS_INPUT_WRAPPER,
  CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
  CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
  CLASS_LIST_INLINE,
  CLASS_SUBNAV,
  CLASS_SUBNAV_ITEM,
  CLASS_TAG,
} from "./constants";
import { searchResultItems, searchTerms } from "./data";

type MegamenuSearchContentProps = {
  inputId: string;
  inputLabel: string;
  searchValue: string;
  hasSearchEmpty: boolean;
  hasSearchFilled: boolean;
  emptyStateLinkHref?: string;
};

export const MegamenuSearchContent = ({
  inputId,
  inputLabel,
  searchValue,
  hasSearchEmpty,
  hasSearchFilled,
  emptyStateLinkHref = "#",
}: MegamenuSearchContentProps) => {
  return (
    <>
      <label htmlFor={inputId} className="sr-only">
        {inputLabel}
      </label>

      <span
        className={cx(
          CLASS_INPUT_WRAPPER,
          CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
          CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
        )}
      >
        <input
          className={CLASS_INPUT}
          id={inputId}
          type="text"
          placeholder="Hľadať"
          name="search"
          defaultValue={searchValue}
        />
      </span>

      {hasSearchEmpty ? (
        <>
          <p className={CLASS_CAPTION}>Najhľadanejši výrazy</p>
          <ul className={CLASS_LIST_INLINE}>
            {searchTerms.map((item) => (
              <li key={item}>
                <a href={emptyStateLinkHref} className={cx(CLASS_TAG)}>
                  {item}
                </a>
              </li>
            ))}
          </ul>
        </>
      ) : hasSearchFilled ? (
        <ul className={CLASS_SUBNAV}>
          {searchResultItems.map((item) => (
            <li key={item} className={CLASS_SUBNAV_ITEM}>
              <a href="#" className="no-underline">
                {item}
              </a>
            </li>
          ))}
        </ul>
      ) : null}
    </>
  );
};