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

import { IconPlus, IconTargetArrow } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuTabs from '@material-hu/components/design-system/Tabs';

import useCustomServerTranslation from 'src/hooks/useCustomServerTranslation';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useCycleContext } from './CycleContext';
import { MODULE_NAME } from './constants';
import { type TabsEnum, useGoalsContext } from './GoalsContext';
import { goalsRoutes } from './routes';

const GoalsContent = () => {
  const { t } = useLokaliseTranslation('goals');
  const navigate = useNavigate();
  const { state: locationState } = useLocation();
  const goalsTitle = useCustomServerTranslation({
    module: MODULE_NAME,
    defaultTranslationKey: 'general:goals',
  });
  const {
    selectedTab,
    goalsTabs,
    handleTabChange,
    TabComponents,
    setLastVisitedTab,
    setSelectedTab,
  } = useGoalsContext();
  const { selectedCycleId } = useCycleContext();

  const SelectedComponent = TabComponents[selectedTab];

  useEffect(() => {
    if (locationState?.tab) {
      setSelectedTab(locationState.tab);
    }
  }, [locationState, setSelectedTab]);

  return (
    <Stack sx={{ height: '100%' }}>
      <Helmet>
        <title>{formatTitle(goalsTitle)}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: theme =>
            theme.palette.new?.background?.layout?.default,
          height: '100%',
          p: 3,
          gap: 3,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 2,
            }}
          >
            <Stack
              sx={{
                backgroundColor: theme =>
                  theme.palette.new?.background.layout.brand,
                color: theme => theme.palette.new?.text.neutral.brand,
                borderRadius: '50%',
                justifyContent: 'center',
                alignItems: 'center',
                height: '40px',
                width: '40px',
              }}
            >
              <IconTargetArrow />
            </Stack>
            <Typography
              variant="globalL"
              fontWeight="fontWeightSemiBold"
            >
              {goalsTitle}
            </Typography>
          </Stack>
          <Button
            onClick={() => {
              setLastVisitedTab(selectedTab);
              navigate(goalsRoutes.create(), {
                state: {
                  goalCycleId: selectedCycleId,
                },
              });
            }}
            color="primary"
            variant="contained"
            startIcon={<IconPlus size={16} />}
          >
            {t('list.create')}
          </Button>
        </Stack>
        <HuTabs
          defaultValue={selectedTab}
          tabs={goalsTabs}
          onTabChange={(value: string) => handleTabChange(value as TabsEnum)}
        />
        <SelectedComponent />
      </Stack>
    </Stack>
  );
};

export default GoalsContent;