import { useQuery } from 'react-query';

import { IconBeach } 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 HuCardContainer from '@material-hu/components/design-system/CardContainer';
import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

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

import { FEMSA_TIME_OFF_URL } from '../constants';
import { femsaKeys } from '../queries';
import { getFemsaBalance } from '../service/vacations';

const FemsaRequests = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('time_off');
  const { data, isLoading, isError } = useQuery(
    femsaKeys.balance(),
    () => getFemsaBalance(),
    {
      select: data => data.data,
    },
  );

  return (
    <HuGoThemeProvider>
      <Container maxWidth="xl">
        <Stack sx={{ gap: 2, py: 3 }}>
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            {t('time_off')}
          </Typography>
          <HuCardContainer
            fullWidth
            {...(isError && {
              badge: {
                hasIcon: true,
                type: 'warning',
                label: t('error_getting_balance'),
              },
            })}
          >
            <Stack
              sx={{ flexDirection: 'row', justifyContent: 'space-between' }}
            >
              <Stack>
                <Stack sx={{ gap: 5 }}>
                  <Typography
                    variant="globalS"
                    fontWeight="fontWeightSemiBold"
                  >
                    {t('vacations')}
                  </Typography>
                  <Stack>
                    <Stack
                      sx={{
                        gap: 1,
                        flexDirection: 'row',
                        alignItems: 'center',
                      }}
                    >
                      <IconBeach size={36} />
                      {isLoading && <Spinner />}
                      {!isLoading && (
                        <Typography
                          variant="globalL"
                          sx={{
                            color: ({ palette }) =>
                              palette.new.text.neutral.brand,
                            fontWeight: 'fontWeightSemiBold',
                          }}
                        >
                          {data?.totalBalance || '-'}
                          <Typography
                            variant="globalS"
                            sx={{
                              color: ({ palette }) =>
                                palette.new.text.neutral.brand,
                              fontWeight: 'fontWeightSemiBold',
                              ml: 1,
                            }}
                          >
                            {t('days')}
                          </Typography>
                        </Typography>
                      )}
                    </Stack>
                  </Stack>
                </Stack>
                <Typography
                  variant="globalXS"
                  fontWeight="fontWeightSemiBold"
                >
                  {t('available_time')}
                </Typography>
              </Stack>
              <Button
                variant="primary"
                href={FEMSA_TIME_OFF_URL}
                target="_blank"
                rel="noopener noreferrer"
              >
                {t('request')}
              </Button>
            </Stack>
          </HuCardContainer>
        </Stack>
      </Container>
    </HuGoThemeProvider>
  );
};

export default FemsaRequests;
