'use client'
import { BsCaretDownFill } from "react-icons/bs";
import { useSession, signIn, signOut } from "next-auth/react"
import { createRef, useEffect, useState } from "react";
import { trpc } from "@/lib/trpc";
import Cookies from 'js-cookie';
import { useAtomValue } from "jotai";
import { instantDataAtom, stepsNodesAtom } from "../store";
import { exportFlowToDocx } from "../export";
import { BsCloudDownload } from "react-icons/bs";
import { useQueryClient } from "@tanstack/react-query";


export default function Header() {
  const { data: session, status } = useSession()
  const queryClient = useQueryClient()
  const logOut = async () => {
    await fetch("https://beta.api.cocorobo.cn/api/logout", {
      method: "POST", credentials: 'include'
    });
    await queryClient.invalidateQueries({ queryKey: ['auth'] })
    await signOut({ redirect: false })
  }

  return (
    <div className="navbar shrink-0 bg-base-100 shadow-xl rounded-box justify-center relative">
      {/* <div className="dropdown">
        <div tabIndex={0} role="button" className="btn btn-sm btn-wide btn-ghost">选择对话<BsCaretDownFill /></div>
        <ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-[2] w-52 p-2 shadow">
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      </div> */}
      <div className="absolute right-4 flex items-center">
        {status === 'authenticated'
          ? (
            <div className="flex gap-2 items-center">
              <p>Hi, </p>
              <div className="dropdown dropdown-bottom dropdown-end">
                <label tabIndex={0} className="btn btn-sm m-1">{session.user?.name}</label>
                <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                  <li><a onClick={logOut}>退出登录</a></li>
                </ul>
              </div>
            </div>
          ) : null
        }
      </div>
    </div >
  )
}