import axios from "axios";
import Image from "next/image";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { Button } from "react-bootstrap";
import { Typeahead } from "react-bootstrap-typeahead";
import "react-bootstrap-typeahead/css/Typeahead.css";
import { useDispatch } from "react-redux";
import { setActivityFilters } from "../../redux/actions/activityAction";

const SearchBar = () => {
  const [open, setopen] = useState(false);
  const [options, setoptions] = useState([]);
  const dispatch = useDispatch();
  const router = useRouter();
  // console.log("options", options);
  return (
    <>
      <section className="searchbar-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="searchbar-h">
                <Typeahead
                  open={open}
                  id="select"
                  placeholder="Search for products, brands or categories"
                  onBlur={() => {
                    setopen(false);
                  }}
                  onChange={selected => {
                    console.log("selected", selected);
                    // router.push("/listing");
                    if (selected[0]?.label.includes("experience")) {
                      // console.log("jjja");
                      router.push(`/activities/${selected[0].id}`);
                    }
                    if (selected[0]?.label.includes("category")) {
                      router.push(`/listing?category=${selected[0].id}`);
                      // dispatch(setActivityFilters({ filters: { category: selected[0].id, subCategories: [] } }));
                    }
                    // Handle selections...
                  }}
                  onInputChange={async e => {
                    console.log(e);
                    if (e.length > 1) {
                      const config = {
                        headers: {
                          "Content-Type": "application/json"
                        }
                      };

                      const res = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experience/get-search-response`, { string: e }, config);
                      console.log("res", res.data);
                      if (res.data.success) {
                        let opts = res.data.data.categories?.map(item => {
                          return { id: item.id, label: `Category - ${item.name}` };
                        });
                        console.log("here", opts);
                        if (opts?.length > 0) {
                          const a = res.data.data.activities?.map(item => {
                            return { id: item.id, label: `Experience - ${item.name}` };
                          });
                          opts = [...opts, ...a];
                        } else {
                          opts = res.data.data.activities?.map(item => {
                            return { id: item.id, label: `Experience - ${item.name}` };
                          });
                        }
                        // console.log("opts", opts);
                        setoptions(opts);
                        setopen(true);
                      }
                    } else {
                      setopen(false);
                    }
                  }}
                  options={options}
                />
                {/* <input type="text"  /> */}
                <Button className="search-icon">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
                  </span>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default SearchBar;