import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { useUser, withPageAuthRequired } from '@auth0/nextjs-auth0';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';

import { PingcapLogoSvg } from 'src/icons';
import UserMenu from 'src/components/Layout/UserMenu';
import LangSwitch from 'src/components/Button/LangSwitch';
import { HeaderLoginBtn } from 'src/components/Button/Login';
import logger from 'next-pino/logger';

import { auth0MetaState, zendeskDataState } from 'src/atom';
import { useRecoilState } from 'recoil';

import axios from 'src/lib/axios';
import { ZENDESK_AUTH_PATH, Pages, AUTH0_LOG_IN_PATH } from 'src/constants';

const AuthHeader = withPageAuthRequired(ResponsiveAppBar);

function Header(props: { authType?: 'forced' | 'optional' | 'disabled' }) {
  const { authType = 'forced' } = props;

  return authType === 'forced' ? (
    <AuthHeader authType={authType} />
  ) : (
    <ResponsiveAppBar authType={authType} />
  );
}

function ResponsiveAppBar(props: {
  authType?: 'forced' | 'optional' | 'disabled';
}) {
  const { authType = 'forced' } = props;

  const { user, error, isLoading } = useUser();
  const { t } = useTranslation();
  const router = useRouter();

  const [auth0Meta, setAuth0Meta] = useRecoilState(auth0MetaState);
  const [zendeskData, setZendeskData] = useRecoilState(zendeskDataState);

  React.useEffect(() => {
    if (user) {
      setAuth0Meta(user);
    }
    if (error) {
      logger.error({ name: `header`, error }, 'auth0 error');
      setAuth0Meta(null);
    }
  }, [setAuth0Meta, error, user, isLoading, authType, router]);

  React.useEffect(() => {
    const getZendeskData = async () => {
      try {
        const data = await axios.get(ZENDESK_AUTH_PATH).then((res) => {
          return res.data;
        });
        const token = data.oauth_token as string;
        setZendeskData((oldData) => ({
          ...oldData,
          token,
        }));
        logger.debug({ name: `header`, data }, `zendesk data`);
      } catch (err: any) {
        if (err?.response?.status === 404) {
          logger.info({ name: `header` }, `zendesk not logged in`);
          !router.pathname.includes(`/zendesk`) && router.push(Pages.Zendesk);
        }
        logger.error({ name: `header`, error: err }, `zendesk error`);
      }
    };
    if (user && !zendeskData.token && authType === 'forced') {
      getZendeskData();
    }
  }, [authType, router, setZendeskData, user, zendeskData.token]);

  return (
    <AppBar
      position="fixed"
      sx={{
        backgroundColor: '#f9f9f9',
        boxShadow: 'none',
      }}
    >
      <Container maxWidth="xl">
        <Toolbar disableGutters>
          <Link href="/" aria-label={t('header.home_btn_label')}>
            <Box
              sx={{
                display: 'flex',
                cursor: 'pointer',
                alignItems: 'center',
              }}
            >
              <PingcapLogoSvg sx={{ mr: 1, width: '2rem', height: '2rem' }} />
              <Typography variant="h6" color="custom.k2">
                {t('header.title')}
              </Typography>
            </Box>
          </Link>

          <Box sx={{ flexGrow: 0, ml: 'auto' }}>
            <LangSwitch />
            {user?.email && (
              <UserMenu
                email={user?.email}
                displayName={user?.name}
                avatarUrl={user?.picture}
                loading={isLoading}
              />
            )}
            {!user?.email && <HeaderLoginBtn />}
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}

export default Header;