import { type FC } from 'react';

import { IconMinus, IconPlus } from '@material-hu/icons/tabler';
import { alpha } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack/Stack';
import useTheme from '@material-hu/mui/styles/useTheme';
import Typography from '@material-hu/mui/Typography/Typography';

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

type Props = {
  pageNumber: number;
  numPages: number;
  zoomIn: () => void;
  zoomOut: () => void;
  zoomPercent: number;
  isZoomInDisabled: boolean;
  isZoomOutDisabled: boolean;
};

const FooterControls: FC<Props> = ({
  pageNumber,
  numPages,
  zoomIn,
  zoomOut,
  zoomPercent,
  isZoomInDisabled,
  isZoomOutDisabled,
}) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 3.5,
        position: 'fixed',
        left: '50%',
        transform: 'translateX(-50%)',
        bottom: 32,
        zIndex: ({ zIndex }) => zIndex.modal + 1,
        backgroundColor: ({ palette }) => palette.new.text.neutral.default,
        borderRadius: ({ shape }) => shape.borderBottomLeftRadiusL,
        px: 2,
        py: 1,
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          sx={{
            color: ({ palette }) => palette.new.text.neutral.inverted,
          }}
        >
          {t('page')}
        </Typography>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            sx={{
              borderRadius: ({ shape }) => shape.borderRadiusM,
              px: 1.5,
              py: 1,
              backgroundColor: ({ palette }) =>
                alpha(palette.newBase?.blackInk[950] ?? '#17171C', 0.4),
              color: ({ palette }) => palette.new.text.neutral.inverted,
              border: ({ palette }) =>
                `1px solid ${alpha(
                  palette.newBase?.blackInk[950] ?? '#17171C',
                  0.6,
                )}`,
            }}
          >
            {pageNumber}
          </Typography>
          <Typography
            variant="globalXS"
            fontWeight="fontWeightSemiBold"
            sx={{
              minWidth: 24,
              color: ({ palette }) => palette.new.text.neutral.inverted,
              textAlign: 'center',
            }}
          >
            / {numPages || '-'}
          </Typography>
        </Stack>
      </Stack>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 0.5,
          color: ({ palette }) => palette.new.text.neutral.inverted,
        }}
      >
        <Stack
          onClick={zoomOut}
          sx={{
            cursor: isZoomOutDisabled ? 'default' : 'pointer',
            width: 40,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <IconMinus
            color={alpha(
              theme.palette.new.text.neutral.inverted ||
                theme.palette.new.background.layout.tertiary,
              isZoomOutDisabled ? 0.5 : 1,
            )}
          />
        </Stack>
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          color="inherit"
        >
          {zoomPercent}%
        </Typography>
        <Stack
          onClick={zoomIn}
          sx={{
            cursor: isZoomInDisabled ? 'default' : 'pointer',
            width: 40,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <IconPlus
            color={alpha(
              theme.palette.new.text.neutral.inverted ||
                theme.palette.new.background.layout.tertiary,
              isZoomInDisabled ? 0.5 : 1,
            )}
          />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default FooterControls;
