import * as React from 'react';
import { useRouter } from 'next/router';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';

import Layout from 'src/components/Layout';
import logger from 'next-pino/logger';
import axios from 'src/lib/axios';
import {
  ZENDESK_AUTH_PATH,
  Pages,
  ZENDESK_GET_ME_PATH,
  ZENDESK_OAUTH_URL,
  ZENDESK_REDIRECT_URL,
  ZENDESK_OAUTH_CLIENT_ID,
} from 'src/constants';

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

export default function ZendeskPage<NextPage>() {
  const [errorMsg, setErrorMsg] = React.useState<string | null>(null);
  const [zendeskData, setZendeskData] = useRecoilState(zendeskDataState);

  const router = useRouter();
  const { t } = useTranslation();

  const updateZendeskTokenRecord = async (newToken: string) => {
    try {
      const res = await axios.post(ZENDESK_AUTH_PATH, {
        token: newToken,
      });
      setErrorMsg(null);
      console.log(res);
    } catch (error: any) {
      logger.error(
        { name: `zendesk`, error },
        'updateZendeskTokenRecord error'
      );
      setErrorMsg(error?.response?.data?.message);
      console.log(error);
    }
  };

  const validateZendeskToken = async (token: string) => {
    try {
      const data = await axios
        .get(ZENDESK_GET_ME_PATH, {
          headers: {
            Authorization: token,
          },
        })
        .then((res) => {
          return res.data;
        });
      return data;
    } catch (error: any) {
      logger.error({ name: `zendesk`, error }, 'validateZendeskToken error');
      return { error };
    }
  };

  React.useEffect(() => {
    const refeshZendeskToken = async (token: string) => {
      const data = await validateZendeskToken(token);
      if (data.error) {
        setErrorMsg(`${data.error}`);
      } else if (data.user) {
        await updateZendeskTokenRecord(token);
        router.push(Pages.Home);
      } else {
        setErrorMsg(t('zendesk.empty_validate_token'));
      }
    };

    if (window.location.hash) {
      console.log('hash', window.location.hash);
      const urlParams = new URLSearchParams(window.location.hash.substring(1));
      const token = urlParams.get('access_token');
      const error = urlParams.get('error');
      const errorDescription = urlParams
        .get('error_description')
        ?.replaceAll('+', ' ');
      if (error) {
        logger.error({ name: `zendesk`, error }, errorDescription);
        setErrorMsg(`${error}: ${errorDescription}`);
      }
      if (token) {
        // success
        setZendeskData((oldData) => ({
          ...oldData,
          token,
        }));
        refeshZendeskToken(token);
      }
    } else if (!zendeskData?.token) {
      router.push(
        `${ZENDESK_OAUTH_URL}?response_type=token&redirect_uri=${ZENDESK_REDIRECT_URL}&client_id=${ZENDESK_OAUTH_CLIENT_ID}&scope=tickets:write%20requests:write%20read`
      );
    }
  }, [router, router.events, setZendeskData, zendeskData?.token]);

  return (
    <Layout
      title="Zendesk Auth"
      description="Validate and authorize Zendesk"
      authType="forced"
      noIndex
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          height: '100vh',
        }}
      >
        <Typography variant="h3">{t('zendesk.redirecting')}</Typography>
        {errorMsg && (
          <Alert severity="error">
            <AlertTitle>{t('zendesk.error')}</AlertTitle>
            {errorMsg}
          </Alert>
        )}
      </Box>
    </Layout>
  );
}

export async function getStaticProps({ locale }: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
      // Will be passed to the page component as props
    },
  };
}