import { useCallback } from 'react';
import { Helmet } from 'react-helmet-async';

import { useMutation } from 'react-query';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';

import { isNil } from 'lodash-es';

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

import HuTaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import useAuth from 'src/contexts/JWTContext';
import {
  capabilityToi18nKey,
  useCustomServerTranslation,
} from 'src/hooks/useCustomServerTranslation';
import useGeneralError from 'src/hooks/useGeneralError';
import useHuGoTheme from 'src/hooks/useHuGoTheme';

import { goalRoutes } from 'src/pages/dashboard/Goals/routes';
import * as goalsService from 'src/services/goalsService';

import {
  GoalErrorCodes,
  UpdateGoalForm,
  UpdateGoalPayload,
} from 'src/types/goals';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import CenteredCircularProgress from 'src/components/CircularProgress';

import EditGoalForm from './components/EditGoalForm';
import { useEditGoalPageQuery } from './hooks/useEditGoalPageQuery';
import { buildGoalPayload } from './utils/editGoalForm';
import {
  isSouthbayInstance,
  isSullairInstance,
  isTissurInstance,
} from './utils/validations';

const EditGoal = () => {
  const { t } = useLokaliseTranslation('goals');
  const HuGoThemeProvider = useHuGoTheme();
  const navigate = useNavigate();
  const showGeneralError = useGeneralError();
  const { enqueueSnackbar } = useHuSnackbar();
  const { instance } = useAuth();
  const getCustomTitle = useCustomServerTranslation();
  const moduleTitle = getCustomTitle(
    capabilityToi18nKey(UserPermissions.VIEW_GOALS),
    'TITLE_' + UserPermissions.VIEW_GOALS,
  );

  const { id: cycleId, goalId } = useParams();
  const [searchParams] = useSearchParams();

  const goalIdToUse = goalId ? parseInt(goalId) : 0;
  const cycleIdToUse = cycleId ? parseInt(cycleId) : 0;
  const instanceId = instance?.id;

  const { isLoading, isFetching, goalCyclesList, goalCycle, goal } =
    useEditGoalPageQuery({
      goalId: goalIdToUse,
      goalCycleId: cycleIdToUse,
    });

  const updateGoalMutation = useMutation(
    ({ id: goalIdParam, body }: { id: number; body: UpdateGoalPayload }) =>
      goalsService.updateGoal(goalIdParam, body),
    {
      onSuccess: () => {
        handleSuccessNavigation();
        enqueueSnackbar({ title: t('success_edit'), variant: 'success' });
      },
      onError: (err: any) => {
        if (
          [
            GoalErrorCodes.INVALID_GOAL_OWNER,
            GoalErrorCodes.BAD_REQUEST,
            GoalErrorCodes.INVALID_GOAL_PUBLISH,
            GoalErrorCodes.INVALID_GOAL_FORMULA_CONFIGURATION,
          ].includes(err?.response?.data?.code)
        ) {
          const errorMessage =
            err?.response?.data?.message || err?.response?.data?.code;
          enqueueSnackbar({ title: errorMessage, variant: 'error' });
        } else {
          showGeneralError(err);
        }
      },
    },
  );

  const handleSuccessNavigation = useCallback(() => {
    navigate(`${goalRoutes.cycle(parseInt(cycleId || '0'))}?initialStep=1`);
  }, [cycleId, navigate, searchParams]);

  const handleUpdateGoal = useCallback(
    (formValues: UpdateGoalForm) => {
      updateGoalMutation.mutate({
        id: goalIdToUse,
        body: buildGoalPayload(formValues),
      });
    },
    [updateGoalMutation, goal?.id],
  );

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

  if (
    isLoading ||
    isFetching ||
    isNil(goalCyclesList) ||
    isNil(goalCycle) ||
    isNil(goal)
  )
    return (
      <HuGoThemeProvider>
        <Helmet>
          <title>{formatTitle(moduleTitle)}</title>
        </Helmet>
        <HuTaskFocusHeader
          onBack={handleBack}
          title={t('detail.title')}
        />
        <Stack
          sx={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <CenteredCircularProgress centered />
        </Stack>
      </HuGoThemeProvider>
    );

  const isTissur = isTissurInstance(instanceId);
  const isSouthbay = isSouthbayInstance(instanceId);
  const isSullair = isSullairInstance(instanceId);

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(moduleTitle)}</title>
      </Helmet>
      <Stack
        id="goal-layout"
        sx={{
          height: '100vh',
        }}
      >
        <HuTaskFocusHeader
          onBack={handleBack}
          title={t('detail.title')}
        />
        <EditGoalForm
          isTissur={isTissur}
          isSouthbay={isSouthbay}
          isSullair={isSullair}
          goal={goal}
          goalCycleId={cycleIdToUse}
          goalCycles={goalCyclesList}
          onSave={handleUpdateGoal}
        />
      </Stack>
    </HuGoThemeProvider>
  );
};

export default EditGoal;