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 { loadUser } from "../../redux/actions/userActions";
import { useRouter } from "next/router";

const Header = () => {
  const { user, error } = useSelector(state => state.loadedUser);
  const dispatch = useDispatch();
  // console.log("user", user);
  const [isSticky, setIsSticky] = useState(false);
  const router = useRouter();
  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);
    };
  }, []);
  return (
    <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
      <Navbar expand="lg" className="bg-body-tertiary">
        <Container fluid>
          <Navbar.Brand href="/">
            <span className="image-container">
              <Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
            </span>
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="navbarScroll" />
          <Navbar.Collapse id="navbarScroll">
            <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
              <Nav.Link href="/blog">Blogs</Nav.Link>
              <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">
                <Form.Control type="search" placeholder="Search" className="me-2" aria-label="Search" />
                <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)} */}
            {user && user.id ? (
              <div>
                <div>
                  <p>Brand Logo</p>
                </div>
                <p>{user.phone}</p>
                <Button
                  onClick={async () => {
                    signOut({ redirect: false });
                    await router.push("/")
                    window.location.reload()
                  }}
                  className="me-3"
                  variant="primary"
                >
                  Log out
                </Button>
              </div>
            ) : (
              <div>
                <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;