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

import { HeroSvg, TiDBLogoBlackSvg, TiDBCloudLogoBlackSVG } from 'src/icons';
import { Pages } from 'src/constants';
import { HeroLoginButton } from 'src/components/Button/Login';

import { auth0MetaState } from 'src/atom';
import { useRecoilValue } from 'recoil';

export default function HeroSection(props: any) {
  const { t } = useTranslation();
  const auth0Meta = useRecoilValue(auth0MetaState);

  const router = useRouter();

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: {
          xs: 'column-reverse',
          md: 'row',
        },
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '2rem 0',
        gap: {
          xs: '2rem',
          md: '0',
        },
      }}
    >
      <Box
        id="hero-left"
        sx={{
          display: 'flex',
          flexDirection: 'column',
          width: { xs: '100%', md: '50%' },
          alignItems: 'flex-start',
          justifyContent: 'center',
          gap: '1rem',
        }}
      >
        <Typography component="div" variant="h3">
          {t('home_page.hero.title')}
        </Typography>
        <Typography component="div" variant="h6">
          {t('home_page.hero.subtitle')}
        </Typography>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: '2rem',
          }}
        >
          <TiDBCloudLogoBlackSVG
            sx={{
              width: '2rem',
              height: '2rem',
            }}
          />
          <TiDBLogoBlackSvg
            sx={{
              width: '2rem',
              height: '2rem',
            }}
          />
        </Box>
        {auth0Meta && (
          <Stack
            direction="row"
            sx={{
              gap: '1rem',
              marginTop: '2rem',
              flexWrap: 'wrap',
              flexDirection: {
                xs: 'column',
                md: 'row',
              },
            }}
          >
            <Button
              variant="contained"
              onClick={() => {
                router.push(Pages.NewRequest);
              }}
            >
              {t('button.submit_request')}
            </Button>
            <Button
              variant="contained"
              onClick={() => {
                router.push(Pages.Requests);
              }}
            >
              {t('button.view_my_requests')}
            </Button>
          </Stack>
        )}
        {!auth0Meta && <HeroLoginButton />}
      </Box>
      <Box
        id="hero-right"
        sx={{
          display: 'flex',
          width: { xs: '100%', md: '50%' },
          alignItems: 'center',
          justifyContent: {
            xs: 'center',
            md: 'flex-end',
          },
        }}
      >
        <HeroSvg
          sx={{
            width: '100%',
            height: '100%',
            maxWidth: {
              xs: '20rem',
              md: '30rem',
            },
          }}
        />
      </Box>
    </Box>
  );
}