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

import { IconInfoCircle } from '@material-hu/icons/tabler';
import Container from '@material-hu/mui/Container';
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 CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import StateCard from '@material-hu/components/design-system/StateCard';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useUsersAvatars from 'src/hooks/useUsersAvatars';
import PlusIcon from 'src/icons/Plus';
import * as regionService from 'src/services/regionsService';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { regionKeys } from '../queries';
import { regionRoutes } from '../routes';

import RegionCard from './components/RegionCard';

const RegionCardSkeleton = () => (
  <CardContainer fullWidth>
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 2,
      }}
    >
      <Stack
        flexDirection="row"
        sx={{ flex: 1, alignItems: 'center', gap: 2 }}
      >
        <Skeleton
          variant="circular"
          sx={{ height: 40, width: 40 }}
        />
        <Stack sx={{ gap: 1, flex: 1 }}>
          <Skeleton
            variant="rounded"
            sx={{ height: 20, width: '60%' }}
          />
          <Skeleton
            variant="rounded"
            sx={{ height: 16, width: '40%' }}
          />
        </Stack>
      </Stack>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 3,
        }}
      >
        <Skeleton
          variant="circular"
          sx={{ height: 32, width: 32 }}
        />
        <Skeleton
          variant="rounded"
          sx={{ height: 24, width: 20 }}
        />
      </Stack>
    </Stack>
  </CardContainer>
);

const RegionList = () => {
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation('regions');

  const HuGoThemeProvider = useHuGoTheme();

  const {
    data: regionData,
    isLoading: isLoadingRegions,
    isFetching,
  } = useQuery(regionKeys.all(), regionService.getRegions, {
    select: response => response.data,
  });

  const { getUsersInfo, isLoadingAvatars } = useUsersAvatars({
    entityData: regionData ?? {
      items: [],
      count: 0,
      totalPages: 0,
      page: 0,
      limit: 0,
      offset: 0,
    },
  });

  const isLoading = isLoadingRegions || isFetching || isLoadingAvatars;

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('regions'))}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          minHeight: '100%',
        }}
      >
        <Container
          maxWidth="md"
          sx={{ py: 3 }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <Typography
              variant="globalL"
              sx={{ fontWeight: 'fontWeightSemiBold' }}
            >
              {t('regions')}
            </Typography>
            <Button
              startIcon={<PlusIcon fontSize="small" />}
              variant="primary"
              onClick={() => {
                navigate(regionRoutes.newRegion());
              }}
            >
              {t('add')}
            </Button>
          </Stack>
          {isLoading && (
            <Stack
              sx={{
                gap: 2,
                mt: 3,
              }}
            >
              {Array.from({ length: 6 }).map((_, index) => (
                <RegionCardSkeleton key={index} />
              ))}
            </Stack>
          )}
          {!isLoading && regionData?.items && regionData.items.length > 0 && (
            <Stack
              sx={{
                gap: 2,
                mt: 3,
              }}
            >
              {regionData.items.map(region => (
                <RegionCard
                  key={region.id}
                  region={region}
                  usersPreview={getUsersInfo}
                />
              ))}
            </Stack>
          )}
          {!isLoading && !regionData?.items?.length && (
            <Stack sx={{ mt: 3 }}>
              <StateCard
                icon={IconInfoCircle}
                variant="primary"
                title={t('no_regions')}
                description={t('no_regions_hint')}
              />
            </Stack>
          )}
        </Container>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default RegionList;