import React, { useEffect } from "react";
import Navbar from "../../components/Navbar";
import Footer from "../Home/Footer";
import searchIcon from "../../assets/icons/search.png";
import dropdown from "../../assets/icons/dropdown.png";
import whiteDropdown from "../../assets/icons/white-dropdown.png";
import { connect } from "react-redux";
import { faq } from "../../redux/actions";
import scroll from "../../util/scroll.js";
import "./index.scss";

function Faq({
  list,
  selectFaq,
  getList,
  searchFaq,
  searchResult,
  search,
}: any) {
  useEffect(() => {
    getList();
    scroll.goToTop();
  }, []);
  return (
    <div className="faq main d-flex flex-column">
      <Navbar />
      <main className="d-flex flex-column">
        <header className="d-flex flex-column">
          <h1>پرسش های متداول</h1>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
            استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
            ستون و سطرآنچنان که لازم است و برای شرایط{" "}
          </p>
          <div className="d-flex">
            <input
              type="search"
              placeholder="سوال خود را جستجو کنید"
              onChange={(e) => searchFaq(e.target.value)}
            />
            <button>
              <img src={searchIcon} alt="جستجو" />
            </button>
          </div>
        </header>
        <ul className="faq__list d-flex flex-column">
          {!search &&
            list?.map((item: any, i: any) => (
              <li className="d-flex flex-column" key={i}>
                <div
                  className="faq__list--itemHeader d-flex align-items-center justify-content-between"
                  onClick={() => selectFaq(item.id)}
                >
                  <strong>{item.title}</strong>
                  {item.active ? (
                    <img src={dropdown} alt="" />
                  ) : (
                    <img src={whiteDropdown} alt="" />
                  )}
                </div>
                {item.active && (
                  <div className="faq__list--itemBody d-flex">
                    <p>{item.description}</p>
                  </div>
                )}
              </li>
            ))}
          {search &&
            searchResult?.map((item: any, i: any) => (
              <li className="d-flex flex-column" key={i}>
                <div
                  className="faq__list--itemHeader d-flex align-items-center justify-content-between"
                  onClick={() => selectFaq(item.id)}
                >
                  <strong>{item.title}</strong>
                  {item.active ? (
                    <img src={dropdown} alt="" />
                  ) : (
                    <img src={whiteDropdown} alt="" />
                  )}
                </div>
                {item.active && (
                  <div className="faq__list--itemBody d-flex">
                    <p>{item.description}</p>
                  </div>
                )}
              </li>
            ))}
        </ul>
      </main>
      <Footer />
    </div>
  );
}

export default connect(
  (state: any) => ({
    list: state.faq.list,
    searchResult: state.faq.searchResult,
    search: state.faq.search,
  }),
  { getList: faq.list, selectFaq: faq.selectFaq, searchFaq: faq.searchFaq }
)(Faq);
