import { getSession, signOut } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useRef, 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";
import { Skeleton } from "antd";

const Header = () => {
  const [isGridViewOpen, setIsGridViewOpen] = useState(false);
  const { loadedUser } = useSelector(state => state.loadedUser);
  const { endUser, loading } = 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]);

// console.log("endUser", endUser);
  ////
  // const [isGridViewOpen, setIsGridViewOpen] = useState(false);
  const innerBoxRef = useRef(null); // Ref to hold reference to inner-box div
  const logoutBkRef = useRef(null);

  // Function to toggle the dropdown visibility
  const toggleGridViewDropdown = () => {
    setIsGridViewOpen(!isGridViewOpen); // Toggle the state
  };

  // Function to handle click outside
  const handleClickOutside = (event) => {
    if (
      logoutBkRef.current &&
      !logoutBkRef.current.contains(event.target) &&
      innerBoxRef.current &&
      !innerBoxRef.current.contains(event.target)
    ) {
      setIsGridViewOpen(false); // Close if clicked outside
    }
  };

  // Effect to add click event listener when component mounts
  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  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>
          {loadedUser && loadedUser.id ? (
            <div className="top-btn hide-on-desktop">
              <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 ref={logoutBkRef} 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">{endUser.attributes.name}</div>
                      <div className="view-profile">
                        <a href="/user/profile">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 Enquires
                        </a>
                      </li>
                      <li>
                        <a href="/user/wishlist">
                          <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="/gift-card">
                          <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
                          onClick={async () => {
                            signOut({ redirect: false });
                            await router.push("/");
                            window.location.reload();
                          }}
                        >
                          <span className="image-container">
                            <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" />
                          </span>
                          Log out
                        </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 hide-on-desktop asdasd">
              {/* <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.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 experiences 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>
            {!loading ? (
              <>
                {loadedUser && loadedUser.id ? (
                  <div className="top-btn hide-on-mobile">
                    <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 ref={innerBoxRef} 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>
                          {endUser && <div className="">
                            <div className="name">{endUser.attributes.name}</div>
                            <div className="view-profile">
                              <a href="/user/profile">View Profile</a>
                            </div>
                          </div>}
                        </div>
                        <div className="user-item">
                          <ul>
                            <li>
                              <a href="/user/my-enquires">
                                <span className="image-container">
                                  <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-booking.svg" />
                                </span>
                                My Enquires
                              </a>
                            </li>
                            <li>
                              <a href="/user/wishlist">
                                <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="/gift-card">
                                <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
                                onClick={async () => {
                                  signOut({ redirect: false });
                                  await router.push("/");
                                  window.location.reload();
                                }}
                              >
                                <span className="image-container">
                                  <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" />
                                </span>
                                Log out
                              </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 hide-on-mobiles">
                    <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>
                )}
              </>
            ) : (
              <div className="d-flex align-items-center gap-2">
                {/* <Skeleton.Image active style={{ height: 50, width: 70 }} /> */}
                <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
              </div>
            )}
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;