import Link from "next/link"
import { signIn, signOut, useSession } from "next-auth/react"
import styles from "../styles/header.module.css"

// The approach used in this component shows how to build a sign in and sign out
// component that works on pages which support both client and server side
// rendering, and avoids any flash incorrect content on initial page load.
export default function Header() {
  const { data: session, status } = useSession()
  const loading = status === "loading"

//generate top header with sign in/out button and dropdown menu and user name/surname using tailwindcss




  return (
    <header className="">
      <noscript>
        <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
      </noscript>
      {/* <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> */}
      <div className={styles.signedInStatus}>
        <p
          className={`nojs-show ${
            !session && loading ? styles.loading : styles.loaded
          }`}
        >
          {!session && (
            <>
              <span className={styles.notSignedInText}>
                You are not signed in
              </span>
              <a
                href={`/api/auth/signin`}
                className={styles.buttonPrimary}
                onClick={(e) => {
                  e.preventDefault()
                  signIn()
                }}
              >
                Sign in
              </a>
            </>
          )}
          {session?.user && (
            <>
              {session.user.image && (
                <span
                  style={{ backgroundImage: `url('${session.user.image}')` }}
                  className={styles.avatar}
                />
              )}
              <span className={styles.signedInText}>
                <small>Signed in as</small>
                <br />
                <strong>{session.user.email ?? session.user.name}</strong>
              </span>
              <a
                href={`/api/auth/signout`}
                className={styles.button}
                onClick={(e) => {
                  e.preventDefault()
                  signOut()
                }}
              >
                Sign out
              </a>
            </>
          )}
        </p>
      </div>
      <nav className="max-w-7xl mx-auto ">
        <ul className={styles.navItems}>
          <li className={styles.navItem}>
            <Link href="/">Home</Link>
          </li>
          <li className={styles.navItem}>
            <Link href="/client">Client</Link>
          </li>
          <li className={styles.navItem}>
            <Link href="/server">Server</Link>
          </li>
          <li className={styles.navItem}>
            <Link href="/protected">Protected</Link>
          </li>
          <li className={styles.navItem}>
            <Link href="/api-example">API</Link>
          </li>
          <li className={styles.navItem}>
            <Link href="/admin">Admin</Link>
          </li>
          <li className={styles.navItem}>
            <Link href="/me">Me</Link>
          </li>         
           <li className={styles.navItem}>
                   CART
          {/* cart submenus */}
          <ul className={styles.submenu}>
            <li className={styles.submenuItem}>
              <Link href="/cart/locations">Locations</Link>
            </li>
            <li className={styles.submenuItem}>
              <Link href="/cart/publishers">Publishers</Link>
            </li>
            <li className={styles.submenuItem}>
              <Link href="/cart/availabilities">Availabilities</Link>
            </li>
            <li className={styles.submenuItem}>
              <Link href="/cart/cartevents">Cart Event</Link>
            </li>
          </ul>

          </li>
          {/* end cart submenus */}

          <li className={styles.navItem}>
            <Link href="/cart/calendar">Calendar</Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}