import { useEffect, useRef, useState } from 'react';

import { IconMinus, IconPlus } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuPagination from '@material-hu/components/design-system/Inputs/Pagination';

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

import { usePdfCompletion } from '../contexts/PdfFormCompletionProvider';

const BASE_BUTTON_HEIGHT = '41.07px';

const PdfControls = () => {
  const { t } = useLokaliseTranslation('forms');

  const {
    scale,
    currentPage,
    totalPages,
    handlePageChange,
    handleZoomIn,
    handleZoomOut,
    scrollToPage,
    setTopOverlayOffset,
  } = usePdfCompletion();

  const buttonRef = useRef<HTMLButtonElement>(null);
  const [buttonHeight, setButtonHeight] = useState<number | null>(null);

  useEffect(() => {
    if (buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect();
      setButtonHeight(rect.height);
      // Inform provider about the current controls' height so scrolling can account for it
      setTopOverlayOffset(rect.height + 24); // include top padding/margins around controls
    }
  }, [setTopOverlayOffset]);

  const zoomPercent = Math.round(scale * 100);

  return (
    <Stack
      sx={{
        width: 1,
        p: 1.5,
        gap: 1.5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        borderBottom: ({ palette }) =>
          `1px solid ${palette.new.border.neutral.default}`,
      }}
    >
      <HuPagination
        sx={{
          border: 'none',
          p: 0,
        }}
        type="basic"
        page={currentPage}
        totalPages={totalPages}
        onChangePage={page => {
          handlePageChange(page);
          // In case some callers use handlePageChange elsewhere without scroll
          // ensure we scroll here too for direct user-initiated changes
          scrollToPage(page);
        }}
      />
      <Divider
        orientation="vertical"
        sx={{ height: 1 }}
      />
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <IconButton
          onClick={handleZoomOut}
          variant="secondary"
          aria-label={t('zoom_out')}
          sx={{
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
            borderRight: 'none',
          }}
        >
          <IconMinus />
        </IconButton>
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          sx={{
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.tertiary,
            border: ({ palette }) =>
              `1px solid ${palette.new.border.neutral.brand}`,
            color: ({ palette }) => palette.new.text.neutral.brand,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            px: 1,
            height: buttonHeight ? `${buttonHeight}px` : BASE_BUTTON_HEIGHT,
          }}
        >
          {zoomPercent}%
        </Typography>
        <IconButton
          ref={buttonRef}
          onClick={handleZoomIn}
          variant="secondary"
          aria-label={t('zoom_in')}
          sx={{
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
            borderLeft: 'none',
          }}
        >
          <IconPlus />
        </IconButton>
      </Stack>
    </Stack>
  );
};

export default PdfControls;
