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

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import {
  IconDeviceIpadQuestion,
  IconDevicesSearch,
  IconPlus,
} from '@material-hu/icons/tabler';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

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

import useGeneralError from 'src/hooks/useGeneralError';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { getKioskTerminals } from 'src/services/timeTrackingService';
import { KioskTerminal } from 'src/types/timeTracking';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { flatPages } from 'src/utils/tableUtils';

import { InfiniteList } from 'src/components/InfiniteList';

import ListEmptyState from '../components/ListEmptyState';
import { timeTrackingKeys } from '../queries';
import { timeTrackingRoutes } from '../routes';

import SwitcherSkeleton from './components/SwitcherSkeleton';
import TerminalCard from './components/TerminalCard';
import LinkingInfoDrawer from './LinkingInfoDrawer';

const PAGE_LIMIT = 20;

const Kiosk: FC = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('time_tracker');
  const navigate = useNavigate();
  const showGeneralError = useGeneralError();

  const {
    data: infiniteRegisters,
    isLoading: isLoadingTerminals,
    fetchNextPage,
    isFetchingNextPage,
    hasNextPage,
  } = useInfiniteQuery(
    timeTrackingKeys.kioskTerminals(),
    ({ pageParam = 1 }) =>
      getKioskTerminals({
        page: pageParam,
        limit: PAGE_LIMIT,
      }),
    {
      getNextPageParam: (_, pages) => {
        const { page, totalPages } = pages[pages.length - 1]?.data || {};
        return page < totalPages ? pages.length + 1 : undefined;
      },
      keepPreviousData: true,
      onError: err => {
        showGeneralError(err, t('kiosk.FETCH_TERMINALS_ERROR'));
      },
    },
  );

  const {
    drawer: LinkingInfoDrawerComponent,
    showDrawer: showLinkingInfoDrawer,
    closeDrawer: closeLinkingInfoDrawer,
  } = useDrawerV2(() => ({
    title: t('kiosk.LEARN_TO_LINK'),
    children: <LinkingInfoDrawer />,
    primaryButtonProps: {
      variant: 'primary',
      size: 'large',
      children: t('kiosk.CREATE_TERMINAL'),
      sx: {
        width: '100%',
      },
      onClick: () => {
        navigate(timeTrackingRoutes.newKioskTerminal());
      },
    },
    secondaryButtonProps: {
      variant: 'tertiary',
      size: 'large',
      children: t('GENERAL:EXIT'),
      onClick: () => {
        closeLinkingInfoDrawer();
      },
      sx: {
        width: '100%',
      },
    },
  }));

  const terminals: KioskTerminal[] = flatPages(infiniteRegisters);

  return (
    <HuGoThemeProvider>
      {LinkingInfoDrawerComponent}
      <Helmet>
        <title>{formatTitle(t('kiosk.KIOSK_TERMINALS'))}</title>
      </Helmet>
      <Container
        maxWidth={false}
        sx={{
          alignItems: 'center',
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100%',
        }}
        disableGutters
      >
        <Stack
          sx={{
            maxWidth: '1040px',
            mt: 3,
            px: 3,
            pb: 6,
            width: '100%',
          }}
        >
          <Stack
            sx={{
              alignItems: 'baseline',
              flexDirection: 'row',
              justifyContent: 'space-between',
              mb: 4,
              gap: 5,
              width: '100%',
            }}
          >
            <HuTitle
              title={t('kiosk.TERMINALS_LIST')}
              description={t('kiosk.TERMINALS_LIST_DESCRIPTION')}
              variant="L"
            />
            <Button
              variant="primary"
              onClick={() => {
                navigate(timeTrackingRoutes.newKioskTerminal());
              }}
              startIcon={<IconPlus size={16} />}
              sx={{
                flexShrink: 0,
                fontSize: 14,
              }}
            >
              {t('kiosk.CREATE_TERMINAL')}
            </Button>
          </Stack>
          <Stack sx={{ alignItems: 'center', gap: 2, width: '100%' }}>
            {terminals?.length > 0 && (
              <Button
                variant="secondary"
                startIcon={<IconDeviceIpadQuestion size={16} />}
                onClick={() => {
                  showLinkingInfoDrawer({});
                }}
                sx={{
                  alignSelf: 'flex-end',
                  fontSize: '14px',
                }}
              >
                {t('kiosk.LEARN_TO_LINK')}
              </Button>
            )}
            {isLoadingTerminals && (
              <HuCardContainer
                padding={24}
                fullWidth
              >
                <SwitcherSkeleton isLoading={isLoadingTerminals} />
              </HuCardContainer>
            )}
            {terminals?.length > 0 && (
              <InfiniteList
                isSuccess={!!infiniteRegisters}
                isLoading={isLoadingTerminals}
                isEmpty={terminals.length === 0}
                fetchNextPage={fetchNextPage}
                isFetchingNextPage={isFetchingNextPage}
                hasNextPage={hasNextPage}
                sx={{ width: '100%' }}
              >
                <HuCardContainer
                  fullWidth
                  padding={0}
                >
                  {terminals.map((terminal, idx) => (
                    <TerminalCard
                      key={terminal.id}
                      terminal={terminal}
                      isLast={terminals.length !== idx + 1}
                    />
                  ))}
                </HuCardContainer>
              </InfiniteList>
            )}
            {!terminals?.length && !isLoadingTerminals && (
              <ListEmptyState
                title={t('kiosk.NO_TERMINALS')}
                description={t('kiosk.NO_TERMINALS_DESCRIPTION')}
                icon={IconDevicesSearch}
                action={{
                  text: t('kiosk.LEARN_TO_LINK_KIOSK'),
                  onClick: () => {
                    showLinkingInfoDrawer({});
                  },
                  withIcon: false,
                }}
              />
            )}
          </Stack>
        </Stack>
      </Container>
    </HuGoThemeProvider>
  );
};

export default Kiosk;