import React, { useState } from "react";
import { connect } from "react-redux";
import _ from "lodash";
import { book } from "../../redux/actions";
import search from "../../assets/icons/search.png";
import searchBlack from "../../assets/icons/searchBlack.svg";
import voice from "../../assets/icons/voice.png";
import voiceBlack from "../../assets/icons/voice-black.png";

function HomeSearchBox({
  lastItems,
  setVocal,
  inputValue,
  setInputValue,
  sortFilter,
  selectedSort,
  theme,
}: any) {
  const submitInput = (value: any) => {
    setInputValue(value);
    sortFilter({ search: value, sort: selectedSort });
  };

  const submitSort = (value: any) => {
    sortFilter({ search: inputValue, sort: value });
  };

  const light = theme === "light";
  return (
    <section
      className={_.join(
        [
          "home-search-box d-flex flex-column align-items-center",
          theme === "light" ? "home-search-box-light" : "home-search-box-dark",
        ],
        " "
      )}
    >
      <form className="d-flex" onSubmit={(e) => e.preventDefault()}>
        <input
          type="search"
          placeholder="نام درس یا دوره را جستجو کنید"
          onChange={(e) => submitInput(e.target.value)}
          value={inputValue}
        />
        <button
          type="submit"
          onClick={() => sortFilter({ search: inputValue, sort: selectedSort })}
        >
          <img src={search} alt="" />
        </button>
        {light ? (
          <img
            className="mobile home-search-box__searchIcon"
            src={searchBlack}
            onClick={() =>
              sortFilter({ search: inputValue, sort: selectedSort })
            }
            alt=""
          />
        ) : (
          <img
            className="mobile home-search-box__searchIcon"
            src={search}
            onClick={() =>
              sortFilter({ search: inputValue, sort: selectedSort })
            }
            alt=""
          />
        )}

        <button
          className="home-search-box__voice"
          onClick={() => setVocal(true)}
        >
          {light ? <img src={voiceBlack} alt="" /> : <img src={voice} alt="" />}
        </button>
      </form>
      <footer className="desktop align-items-center">
        <strong>جدیدترین‌ها</strong>
        <ul className="d-flex">
          {lastItems.map((item: any, i: any) => (
            <li
              key={i}
              onClick={() =>
                // sortFilter({ search: inputValue, sort: item.name })
                setInputValue(item.name)
              }
            >
              {item.name}
            </li>
          ))}
        </ul>
      </footer>
    </section>
  );
}

export default connect(
  (state: any) => ({
    selectedSort: state.book.selectedSort,
    theme: state.publicApi.theme,
  }),
  { sortFilter: book.sortFilter }
)(HomeSearchBox);

HomeSearchBox.defaultProps = {
  lastItems: [
    {
      name: "علوم",
    },
    {
      name: "ریاضی",
    },
  ],
};
