import { getSession, signOut } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
import { getCurrentEndUser, loadUser } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
import { getWishlists } from "../../redux/actions/activityAction";
import { Typeahead } from "react-bootstrap-typeahead";
import axios from "axios";
import ActiveLink from "../common/ActiveLink";

const Header = () => {
  const [isGridViewOpen, setIsGridViewOpen] = useState(false);
  const { loadedUser } = useSelector(state => state.loadedUser);
  const { endUser } = useSelector(state => state.endUser);
  const [open, setopen] = useState(false);
  const [options, setoptions] = useState([]);
  // console.log("options", options);
  const dispatch = useDispatch();
  // console.log("user", loadedUser);
  const [isSticky, setIsSticky] = useState(false);
  const router = useRouter();
  const toggleGridViewDropdown = () => {
    setIsGridViewOpen(!isGridViewOpen);
  };
  useEffect(() => {
    const handleScroll = () => {
      // Check if the scroll position is greater than a certain threshold
      const scrollY = window.scrollY || window.pageYOffset;
      setIsSticky(scrollY > 50);
    };

    // Attach the scroll event listener when the component mounts
    window.addEventListener("scroll", handleScroll);

    // Clean up the event listener when the component unmounts
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  useEffect(() => {
    dispatch(getCurrentEndUser());
  }, []);

  useEffect(() => {
    if (endUser) dispatch(getWishlists({ endUser: endUser.id }));
  }, [endUser]);
  return (
    <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
      {isSticky && <div style={{ height: 76 }} className="bg-transparent"></div>}
      <Navbar expand="lg" className="bg-body-tertiary">
        <Container fluid>
          <Navbar.Brand href="/">
            <span className="image-container">
              <Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/main-logo.svg" />
            </span>
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="navbarScroll" />
          <Navbar.Collapse id="navbarScroll">
            <Nav className=" my-2 my-lg-0" navbarScroll>
              <ActiveLink href="/user/wishlist" activeClassName="active">
                <a className="nav-link ">Wishlist</a>
              </ActiveLink>
              <ActiveLink href="/blog" activeClassName="active">
                <a className="nav-link ">Blogs</a>
              </ActiveLink>
              <ActiveLink href="/gift-card" activeClassName="active ">
                <a className="nav-link gift-card">
                  Gift Card{" "}
                  <span className="image-container">
                    <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
                  </span>
                </a>
              </ActiveLink>

              {/* <Nav.Link href="/gift-card" className="gift-card">
                Gift Card
                <span className="image-container">
                  <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
                </span>
              </Nav.Link> */}
            </Nav>
            <Form className="d-flex me-3">
              <div className="header-search">
                <Typeahead
                  open={open}
                  onBlur={() => {
                    setopen(false);
                  }}
                  id="select"
                  placeholder="Search for products, brands or categories"
                  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}
                />
                <Button className="search-icon" variant="outline-success">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
                  </span>
                </Button>
              </div>
            </Form>
            {/* {console.log(user.id)} */}
            {loadedUser && loadedUser.id ? (
              <div className="top-btn">
                <div className="logout-bk">
                  <a onClick={toggleGridViewDropdown} className="user-icon">
                    <span className="image-container user-pic">
                      <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
                    </span>
                    <span className="image-container arrow-d">
                      <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user-arrow-down.svg" />
                    </span>
                  </a>
                  {/* <p>{loadedUser.phone}</p> */}
                  <div className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
                    <div className="user-info">
                      <div className="pic">
                        <span className="image-container">
                          <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
                        </span>
                      </div>
                      <div className="">
                        <div className="name">John Doe</div>
                        <div className="view-profile"><a href="">View Profile</a></div>
                      </div>
                    </div>
                    <div className="user-item">
                      <ul>
                        <li>
                          <a href="">
                            <span className="image-container">
                              <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-booking.svg" />
                            </span>
                            My Bookings
                          </a>
                        </li>
                        <li>
                          <a href="">
                            <span className="image-container">
                              <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-wishlist.svg" />
                            </span>
                            My Wishlist
                          </a>
                        </li>
                        <li>
                          <a href="">
                            <span className="image-container">
                              <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-gift-card.svg" />
                            </span>
                            My Gift Card
                          </a>
                        </li>
                        <li>
                          <a href="">
                            <span className="image-container">
                              <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" />
                            </span>
                            Logout
                          </a>
                        </li>
                      </ul>
                    </div>

                  </div>
                </div>
                <Button
                  onClick={async () => {
                    signOut({ redirect: false });
                    await router.push("/");
                    window.location.reload();
                  }}
                  className="me-3"
                  variant="primary"
                >
                  Log out
                </Button>
              </div>
            ) : (
              <div className="top-btn">
                <Button
                  onClick={() => {
                    router.push("/signup/user");
                  }}
                  className="me-3"
                  variant="primary"
                >
                  Sign Up
                </Button>
                <Button
                  onClick={() => {
                    router.push("/login/user");
                  }}
                  className=""
                  variant="primary"
                >
                  Log In
                </Button>
              </div>
            )}
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;