import * as React from 'react';
import { useQuery } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { useModal } from '@material-hu/hooks/useModal';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import CardHeader from '@material-hu/mui/CardHeader';
import Container from '@material-hu/mui/Container';
import Link from '@material-hu/mui/Link';
import Menu from '@material-hu/mui/Menu';
import MenuItem from '@material-hu/mui/MenuItem';
import Stack from '@material-hu/mui/Stack';
import Tooltip from '@material-hu/mui/Tooltip';

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

import useOnboardingCategories from 'src/hooks/queryHooks/useOnboardingCategories';
import useGeneralError from 'src/hooks/useGeneralError';
import useRequiredParams from 'src/hooks/useRequiredParams';
import useOnboardingsPermissions from 'src/pages/dashboard/Onboardings/hooks/useOnboardingsPermissions';
import * as onboardingsService from 'src/services/onboardingsService';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CenteredCircularProgress from 'src/components/CircularProgress';
import ThemeWrapper from 'src/components/ThemeWrapper';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import useUserDetailQuery from '../../../hooks/useUserDetailQuery';
import { usersKeys } from '../../../queries';
import { usersRoutes } from '../../../routes';

import AddTasks from './AddTasks';
import NoTasks from './NoTasks';
import TaskList from './TaskList';

const OnboardingTab = () => {
  const { t } = useLokaliseTranslation('users');
  const navigate = useNavigate();
  const { id } = useRequiredParams(['id']);
  const userId = Number(id);
  const showGeneralError = useGeneralError();
  const { canCreateOnboardings, canEditOnboardings } =
    useOnboardingsPermissions();

  const showConfiguration = () =>
    navigate(usersRoutes.user(userId), {
      state: { tabId: 'information' },
      replace: true,
    });

  const { data: userResponse, isLoading: userDetailLoading } =
    useUserDetailQuery(id);

  const user = userResponse?.user;
  const hasHiringDate = !!user?.hiringDate;

  const {
    data: userCategories = [],
    isLoading: userTasksLoading,
    refetch: refetchUserTasks,
  } = useQuery(
    usersKeys.userOnboarding(userId),
    () => onboardingsService.getUserOnboardingTasks(userId),
    {
      select: response =>
        response.data.map(cat => ({
          ...cat,
          tasks: cat.tasks.map(task => ({ ...task, ...task.task })),
        })),
    },
  );

  const categoriesToAutoAssignParams = { willBeAutoAssigned: true };
  const {
    data: categoriesToAutoAssign = [],
    refetch: refetchCategoriesToAutoAssign,
  } = useQuery(
    usersKeys.userOnboardingTasks(userId, categoriesToAutoAssignParams),
    () =>
      onboardingsService.getUserTaskLibrary(
        userId,
        categoriesToAutoAssignParams,
      ),
    {
      select: response => response.data,
      enabled: hasHiringDate,
      onError: (err: any) => {
        if (!(err?.response?.data?.code === 'HIRING_DATE_NEEDED')) {
          showGeneralError(err);
        }
      },
    },
  );

  const refetch = () =>
    Promise.all([refetchUserTasks(), refetchCategoriesToAutoAssign()]);

  const { data: hasCategories, isLoading: hasCategoriesLoading } =
    useOnboardingCategories({ select: response => !!response.data.length });

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const individualTask = (taskId: number | null = null) => {
    if (taskId) {
      navigate(usersRoutes.individualTasksEdit(userId, taskId));
    } else {
      navigate(usersRoutes.individualTasksNew(userId));
    }
    handleClose();
  };

  const HuGoThemeProvider = useHuGoTheme();

  const {
    modal: assignModal,
    showModal: showAssignModal,
    closeModal: closeAssignModal,
  } = useModal(AddTasks, { fullWidth: true });
  const openAssignModal = () => {
    showAssignModal({ closeModal: closeAssignModal, refetch, userId });
    handleClose();
  };

  if (userDetailLoading || !user || userTasksLoading || hasCategoriesLoading) {
    return (
      <ThemeWrapper>
        <CenteredCircularProgress centered />
      </ThemeWrapper>
    );
  }

  return (
    <Container
      maxWidth="md"
      sx={{ py: 3 }}
    >
      <Stack sx={{ gap: 2 }}>
        <HuGoThemeProvider>
          <Title
            variant="L"
            title={t('onboarding')}
          />
        </HuGoThemeProvider>
        <ThemeWrapper>
          {assignModal}
          <Card>
            <CardHeader
              title={t('ASSIGNED_TASKS')}
              action={
                hasHiringDate && (
                  <div>
                    {(canCreateOnboardings || canEditOnboardings) && (
                      <Button
                        id="basic-button"
                        aria-controls={open ? 'basic-menu' : undefined}
                        aria-haspopup="true"
                        aria-expanded={open ? 'true' : undefined}
                        onClick={handleClick}
                        variant="outlined"
                        size="small"
                      >
                        {t('ASSIGN_TASKS')}
                      </Button>
                    )}
                    <Menu
                      id="basic-menu"
                      anchorEl={anchorEl}
                      open={open}
                      onClose={handleClose}
                      MenuListProps={{
                        'aria-labelledby': 'basic-button',
                      }}
                    >
                      <MenuItem onClick={openAssignModal}>
                        {t('TASKS_LIBRARY')}
                      </MenuItem>
                      <Tooltip
                        title={!hasCategories ? t('DISABLED_ADD_TASK') : ''}
                      >
                        <div>
                          <MenuItem
                            disabled={!hasCategories}
                            onClick={() => individualTask()}
                          >
                            {t('INDIVIDUAL_TASK')}
                          </MenuItem>
                        </div>
                      </Tooltip>
                    </Menu>
                  </div>
                )
              }
            />
            <CardContent>
              {hasHiringDate && userCategories.length ? (
                <TaskList
                  user={user}
                  userCategories={userCategories}
                  individualTask={individualTask}
                  refetch={refetch}
                />
              ) : (
                <NoTasks
                  title={t(
                    hasHiringDate ? 'NO_ASSIGNED_CATEGORIES' : 'NO_HIRE_DATE',
                  )}
                  subtitle={
                    hasHiringDate ? (
                      t('ASSIGN_A_TASK')
                    ) : (
                      <>
                        {t('COMPLETE_INFO')}
                        <br />
                        <Link
                          component="button"
                          onClick={showConfiguration}
                        >
                          {t('HIRING_DATE')}
                        </Link>
                      </>
                    )
                  }
                />
              )}
            </CardContent>
          </Card>
          {!!categoriesToAutoAssign.length && (
            <Card sx={{ mt: 2 }}>
              <CardHeader title={`${t('AUTO_ASSIGN_TASKS')} ⚡`} />
              <CardContent>
                <TaskList
                  user={user}
                  userCategories={categoriesToAutoAssign}
                  tasksAreAutoAssign
                  refetch={refetch}
                />
              </CardContent>
            </Card>
          )}
        </ThemeWrapper>
      </Stack>
    </Container>
  );
};

export default OnboardingTab;