import { Helmet } from 'react-helmet-async';
import { useLocation, useNavigate } from 'react-router';

import ArrowBackIcon from '@material-hu/icons/material/ArrowBack';
import CloseIcon from '@material-hu/icons/material/Close';
import Container from '@material-hu/mui/Container';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import ConfigurationHeader from 'src/pages/dashboard/Goals/Configuration/components/ConfigurationHeader';
import CustomRangesList from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesList';
import { GoalCycleTab } from 'src/pages/dashboard/Goals/constants';
import { goalRoutes } from 'src/pages/dashboard/Goals/routes';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

const GoalConfiguration = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const navigate = useNavigate();
  const { state } = useLocation() as { state: { backLink?: string } };
  const { t } = useLokaliseTranslation('goals');

  const goBackWithConfig = () => {
    navigate(state?.backLink || goalRoutes.cyclesBase(), {
      state: { activeTab: GoalCycleTab.CONFIG },
    });
  };

  const closePage = () => {
    navigate(goalRoutes.cyclesBase());
  };

  return (
    <HuGoThemeProvider>
      <Stack>
        <Helmet>
          <title>{formatTitle(t('configuration.title'))}</title>
        </Helmet>
        <Stack
          sx={{
            backgroundColor: 'background.default',
            flex: 1,
          }}
        >
          <Container
            maxWidth={false}
            disableGutters
          >
            <Stack
              sx={{
                left: 0,
                zIndex: 200,
                position: 'sticky',
                backgroundColor: 'background.default',
              }}
            >
              <Stack
                sx={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  paddingY: 2.5,
                  paddingX: 3,
                  alignItems: 'center',
                }}
              >
                <Stack
                  sx={{
                    gap: 2,
                    alignItems: 'center',
                    flexDirection: 'row',
                  }}
                >
                  <IconButton onClick={goBackWithConfig}>
                    <ArrowBackIcon />
                  </IconButton>
                  <Typography
                    variant="globalL"
                    fontWeight="fontWeightSemiBold"
                    color={theme => theme.palette.textColors?.neutralText}
                  >
                    {t('general:settings')}
                  </Typography>
                </Stack>
                <IconButton onClick={closePage}>
                  <CloseIcon />
                </IconButton>
              </Stack>
              <Divider />
              <Stack
                sx={{
                  flex: 1,
                  paddingY: 3,
                  width: '100%',
                  minHeight: 'calc(100vh - 144px)',
                  backgroundColor: theme =>
                    theme.palette.hugoBackground?.neutralBg,
                }}
              >
                <Stack
                  sx={{
                    gap: 3,
                    flex: 1,
                    width: '70%',
                    margin: '0 auto',
                  }}
                >
                  <ConfigurationHeader />
                  <CustomRangesList />
                </Stack>
              </Stack>
            </Stack>
          </Container>
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default GoalConfiguration;