import { FC } from 'react';

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

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';

import KioskStoreQR from './components/KioskStoreQR';

const LINK_STEPS_QUANTITY = 4;

const LinkingInfoDrawer: FC = () => {
  const { t } = useLokaliseTranslation('time_tracker');
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Stack sx={{ gap: 2 }}>
        <HuTitle
          variant="M"
          title={t('kiosk.LINK_DEVICE_WITH_TERMINAL')}
          description={t('kiosk.LINKING_STEPS_DESCRIPTION')}
        />
        <HuCardContainer
          padding={24}
          sx={{
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.default,
            border: 'unset',
            display: 'flex',
            flexDirection: 'column',
            mb: 5,
            '.MuiCardContent-root': {
              display: 'flex',
              flexDirection: 'column',
              gap: 3,
            },
          }}
          fullWidth
        >
          {Array.from(Array(LINK_STEPS_QUANTITY).keys()).map((_, index) => (
            <Stack
              key={index}
              sx={{ flexDirection: 'row', gap: 2 }}
            >
              <HuAvatar text={`${index + 1}`} />
              <HuTitle
                variant="M"
                title={t('kiosk.LINK_STEP_TITLE', { context: index + 1 })}
                description={t('kiosk.LINK_STEP_DESCRIPTION', {
                  context: index + 1,
                })}
              />
            </Stack>
          ))}
        </HuCardContainer>
        <KioskStoreQR />
      </Stack>
    </HuGoThemeProvider>
  );
};

export default LinkingInfoDrawer;