import * as React from 'react'
import { useRouter } from 'next/router';
import { Navbar, Nav, Header, Button, Stack, Avatar } from 'rsuite'
import { userAtom, userAuthAtom } from '@/lib/context/user';
import { displayNameFromEmail } from '@/lib/utils/string';
import { useAtom } from 'jotai';
import { signOutHandler } from '@/lib/firebase/firestore/auth';
import DynamicAvatar from '@/components/dynamicAvatar';
import { withUser } from './withUser';
import { useCookies } from 'react-cookie';



const SignInUpNav: React.FC = () => {
  return (
    <Nav pullRight>
      {/* <Nav.Item href='/signup'>Sign up for free</Nav.Item> */}
      <Nav.Item href='/signup' style={{}}>
        <Button appearance='primary'>
          Sign up for free
        </Button>
      </Nav.Item>
      <Nav.Item href='signin'>Sign in</Nav.Item>
    </Nav>
  )
}


interface ProfileNavProps {
  displayName: string,
  photoURL: string,
}

const ProfileNav: React.FC<ProfileNavProps> = (props) => {
  const [user, setUser] = useAtom(userAuthAtom);
  const [, setUserInfo] = useAtom(userAtom);
  const { displayName, photoURL } = props;
  const router = useRouter();
  const [, , removeCookie] = useCookies(['auth']);


  async function loginOut() {
    await signOutHandler();
    setUser(null);
    setUserInfo(null);
    removeCookie('auth');
    router.push('/');
    router.reload();
  }

  return (
    <Nav pullRight>
      {withUser(user, (user) =>
        <Nav.Menu icon={<DynamicAvatar user={user} expanded={false} />} title={`    ${displayName}`}>
          <Nav.Item onSelect={() => router.push('/dashboard')}>Dashboard</Nav.Item>
          <Nav.Item onSelect={loginOut}>logout</Nav.Item>
        </Nav.Menu>
      )}
    </Nav>
  )
}

const MainHeader: React.FC = () => {
  const [user, setUser] = useAtom(userAuthAtom);
  
  // If user is logged in, Change the SignIn/SignUp button to a profile button

  return (
    <Header>
      <Navbar>
        <Navbar.Brand href="/">SSPI</Navbar.Brand>
        <Nav>
          <Nav.Item>How it works</Nav.Item>
          <Nav.Item href='pricing'>Pricing</Nav.Item>
          <Nav.Menu title="Compatibility">
            <Nav.Item>Google sheet</Nav.Item>
            <Nav.Item>Excel 365</Nav.Item>
            <Nav.Item>Airtable</Nav.Item>
          </Nav.Menu>
        </Nav>

        {user === null
          ? <SignInUpNav />
          : <ProfileNav
            displayName={user.displayName == null
              ? displayNameFromEmail(user.email)
              : user.displayName
            }
            photoURL={user.photoURL}
          />
        }

        {/* <Nav pullRight>
          <Nav.Item href='/signup' style={{}}>
            <Button appearance='primary'>
              Sign up for free
            </Button>
          </Nav.Item>
          <Nav.Item href='signin'>Sign in</Nav.Item>
        </Nav> */}
      </Navbar>
    </Header>
  )
}

export default MainHeader