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

import Box from '@material-hu/mui/Box';
import CardMedia from '@material-hu/mui/CardMedia';
import CircularProgress from '@material-hu/mui/CircularProgress';
import Container from '@material-hu/mui/Container';
import Typography from '@material-hu/mui/Typography';

import { useAuth } from 'src/contexts/JWTContext';
import useOnboarding from 'src/hooks/queryHooks/onboarding';
import useGeneralError from 'src/hooks/useGeneralError';
import { onBoardingKeys } from 'src/pages/dashboard/onboarding/queries';
import { onboardingRoutes } from 'src/pages/dashboard/onboarding/routes';
import { getOnboardingTasks } from 'src/services/onboarding';
import { CopyTypePath } from 'src/types/deeplinks';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  getTitleCategory,
  getTasksTodo,
  getTasksDone,
  getIconCategory,
} from 'src/utils/onboarding';

import GoBackButton from 'src/components/dashboard/GoBackButton';
import { WidgetIcon } from 'src/components/dashboard/widgets/WidgetIcon';
import CopyUrlItem from 'src/components/deeplinks/CopyUrlItem';
import ChaptersMenu from 'src/components/quiz/ChaptersMenu';

const CategoryDetail = () => {
  const { categoryId } = useParams();
  const showGeneralError = useGeneralError();
  const { t } = useLokaliseTranslation('onboarding');
  const { user } = useAuth();
  const navigate = useNavigate();

  const categoriesData = useOnboarding(user!.id);

  const tasksData = useQuery(
    onBoardingKeys.tasks.list(categoryId!),
    () => getOnboardingTasks({ userId: user?.id, categoryId }),
    {
      onError: err => showGeneralError(err, t('error_loading_tasks')),
    },
  );

  const handleBack = () => {
    navigate(onboardingRoutes.all());
  };

  const tasks = tasksData?.data?.data || [];

  const categories = categoriesData?.data?.data || [];

  const pendingTasks = getTasksTodo(tasks);
  const doneTasks = getTasksDone(tasks);

  const title = getTitleCategory(categories, categoryId);
  const icon = getIconCategory(categories, categoryId);

  return (
    <Container
      sx={{
        backgroundColor: 'background.default',
        minHeight: '100%',
        pt: 3,
        pb: 3,
      }}
    >
      <Container maxWidth="md">
        <GoBackButton onClick={handleBack} />
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            px: 2,
          }}
        >
          <Box sx={{ display: 'flex' }}>
            <Box sx={{ width: '30px', height: '30px', mr: 2 }}>
              <CardMedia
                component={WidgetIcon}
                icon={icon}
                height="30px"
                width="30px"
              />
            </Box>
            <Typography
              color="textPrimary"
              variant="h5"
              component="h1"
            >
              {title}
            </Typography>
          </Box>
          <Box sx={{ display: 'flex' }}>
            <CopyUrlItem
              type={CopyTypePath.ONBOARDING_CATEGORY}
              route={onboardingRoutes.category(categoryId!)}
            />
          </Box>
        </Box>
        <Box sx={{ mt: 3, mb: 3 }}>
          <Box
            sx={{
              py: 3,
              px: '14%',
              width: '100%',
              backgroundColor: '#ffffff',
              borderRadius: '10px',
            }}
          >
            {tasksData.isLoading && (
              <Box sx={{ textAlign: 'center' }}>
                <CircularProgress />
              </Box>
            )}
            {!tasksData.isLoading && (
              <Box sx={{ display: 'flex' }}>
                <ChaptersMenu
                  id={categoryId!}
                  title={t('pending_tasks_tab')}
                  itemsArray={pendingTasks}
                  routesPath={onboardingRoutes.taks}
                  hasPendingLenght
                />
                <ChaptersMenu
                  id={categoryId!}
                  title={t('done_tasks_tab')}
                  itemsArray={doneTasks}
                  routesPath={onboardingRoutes.taks}
                />
              </Box>
            )}
          </Box>
        </Box>
      </Container>
    </Container>
  );
};
export default CategoryDetail;
