import React, { useState } from "react";
import _ from "lodash";
import searchIcon from "./search.png";

const langDetector = (lang, option1, option2) => {
  return lang === "fa" ? option1 : option2;
};

export default function PopularSearch(props) {
  const [value, setValue] = useState("");
  const [popularsToggle, setPopularsToggle] = useState(false);
  const { lang, theme, populars } = props;

  const onChange = (val) => {
    setValue(val);
  };

  return (
    <div
      className={_.join(
        ["flex flex-col relative search my-2", langDetector(lang, "fa", "en")],
        " "
      )}
    >
      <input
        type="search"
        className="transition py-2 pr-4 pl-2 mx-0 border rounded-md outline-none focus:ring-1 placeholder-gray-500 placeholder-opacity-40 focus:placeholder-blue-300"
        onChange={(e) => onChange(e.target.value)}
        value={value}
        placeholder={langDetector(
          lang,
          "نام کالا را جستجو کنید",
          "search product name"
        )}
        onFocus={() => setPopularsToggle(true)}
        onBlur={() =>
          setTimeout(() => {
            setPopularsToggle(false);
          }, 250)
        }
      />
      <img
        src={searchIcon}
        alt={langDetector(lang, "جستجو", "search")}
        className={_.join(
          [
            "search__icon absolute w-6 h-6 top-1/2 transform -translate-y-1/2",
            langDetector(lang, "left-3", "right-3"),
          ],
          " "
        )}
      />
      <div
        className={_.join(
          [
            "search__populars w-full mt-0 border rounded-md top-12 left-0 absolute z-10 px-4 bg-white",
            popularsToggle ? "flex flex-col" : "hidden",
            "transition",
          ],
          " "
        )}
      >
        <strong className="py-3">
          {langDetector(lang, "جستجوهای پرطرفدار", "Popular search")}
        </strong>
        <ul className="divide-y divide-gray-200">
          {populars?.map((item, i) => (
            <>
              <li
                key={i}
                className="transition py-3 px-1 hover:bg-blue-100"
                onClick={() => setValue(() => item)}
              >
                {item}
              </li>
            </>
          ))}
        </ul>
      </div>
    </div>
  );
}

PopularSearch.defaultProps = {
  lang: "fa",
  theme: "light",
  populars: ["علی", "علیرضا", "محمد", "محمدرضا"],
};