import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';
import { useNavigate, useParams } from 'react-router-dom';

import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import Stack from '@material-hu/mui/Stack';

import { useTheme } from '@material-hu/mui/styles';

import HuTaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import HuTitle from '@material-hu/components/design-system/Title';

import useAuth from 'src/contexts/JWTContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { goalsKeys } from 'src/pages/dashboard/Goals/queries';
import { goalRoutes } from 'src/pages/dashboard/Goals/routes';
import * as goalsService from 'src/services/goalsService';
import * as organizationChartsService from 'src/services/organizationChartsService';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import AddProgress from './components/AddProgress';
import ProgressBar from './components/ProgressBar';
import ProgressHistoryTable from './components/ProgressHistoryTable';
import Responsible from './components/Responsible';

const GoalDetail = () => {
  const { id, goalId: goalIdParam } = useParams();
  const { t } = useLokaliseTranslation('goals');
  const HuGoThemeProvider = useHuGoTheme();
  const { palette } = useTheme();
  const navigate = useNavigate();
  const { user } = useAuth();

  const cycleId = id ? parseInt(id) : undefined;
  const goalId = goalIdParam ? parseInt(goalIdParam) : undefined;

  const {
    data: goal,
    isLoading: goalLoading,
    refetch,
  } = useQuery(goalsKeys.detail(goalId!), () => goalsService.getGoal(goalId!), {
    select: r => r.data,
    enabled: !!goalId,
  });

  const goalUserId = goal?.goalOwners?.[0]?.userId;

  const { data: userBosses, isLoading: bossesLoading } = useQuery(
    goalsKeys.userLeaders(goalUserId!),
    () => organizationChartsService.getBosses(goalUserId!),
    {
      enabled: !!goalUserId,
      select: r => r.data?.items?.map(u => u.id),
    },
  );

  const canAddProgress =
    user?.id === goalUserId || userBosses?.includes(user?.id || 0);
  const isLoading = goalLoading || bossesLoading;

  const handleBack = () => {
    if (cycleId) {
      navigate(`${goalRoutes.cycle(cycleId)}?initialStep=1`);
    }
  };

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('detail.title'))}</title>
      </Helmet>
      <Stack
        id="goal-layout"
        sx={{
          backgroundColor: palette.hugoBackground?.neutralBg,
          height: '100%',
          overflowY: 'scroll',
        }}
      >
        <HuTaskFocusHeader
          onBack={handleBack}
          title={t('detail.title')}
        />
        {isLoading && (
          <Box sx={{ textAlign: 'center', mt: 1 }}>
            <CircularProgress />
          </Box>
        )}
        {!isLoading && goal && user && (
          <Stack sx={{ flexDirection: 'row', gap: 4, px: 8, py: 4 }}>
            <Stack sx={{ flex: 0.7, gap: 3, maxWidth: '70%' }}>
              <ProgressBar goal={goal} />
              {canAddProgress && (
                <Stack sx={{ gap: 2 }}>
                  <HuTitle title={t('general:progress')} />
                  <AddProgress
                    goal={goal}
                    refetch={refetch}
                  />
                </Stack>
              )}
              <Stack sx={{ gap: 2 }}>
                <HuTitle title={t('general:summary')} />
                <ProgressHistoryTable
                  goalId={goal.id}
                  goalValueType={goal.valueType}
                />
              </Stack>
            </Stack>
            <Stack sx={{ flex: 0.3, maxWidth: '30%' }}>
              <Responsible
                goal={goal}
                goalCycleTitle={''}
              />
            </Stack>
          </Stack>
        )}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default GoalDetail;