import { FC } from 'react';

import AddIcon from '@material-hu/icons/material/Add';
import RemoveIcon from '@material-hu/icons/material/Remove';
import ZoomOutIcon from '@material-hu/icons/material/ZoomOut';
import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

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

import { ToolButton } from 'src/components/attachment/preview';

export type ToolContainerProps = {
  isPdf?: boolean;
  onLoadMedia: boolean;
  pageNumber: number;
  totalPages: number;
  onZoom: (param) => void;
  zoomValue: number;
};

export const ToolContainer: FC<ToolContainerProps> = props => {
  const {
    isPdf = false,
    onLoadMedia,
    pageNumber,
    totalPages,
    onZoom,
    zoomValue,
  } = props;

  const { t } = useLokaliseTranslation('files');

  const handleZoomIn = event => {
    event.stopPropagation();
    onZoom(zoomValue + 1);
  };

  const handleZoomOut = event => {
    event.stopPropagation();
    onZoom(zoomValue - 1);
  };
  const handleResetScale = event => {
    event.stopPropagation();
    onZoom(1);
  };

  const isZoomInDisabled = isPdf ? zoomValue === 4 : zoomValue === 2;

  const isZoomOutDisabled = zoomValue === 1;

  const isResetZoomDisabled = zoomValue === 1;

  return (
    <Box
      sx={{
        backgroundColor: 'transparent',
        display: 'flex',
        justifyContent: 'center',
        position: 'fixed',
        width: '100%',
        bottom: '16px',
        left: '0px',
      }}
    >
      {isPdf && onLoadMedia && (
        <Box
          sx={{
            backgroundColor: '#000000bf',
            display: 'flex',
            width: 'fit-content',
            right: '50%',
            alignItems: 'center',
            borderRight: '1px solid #ffffff33',
            borderTopLeftRadius: '100px',
            borderBottomLeftRadius: '100px',
            px: 2,
            zIndex: 10,
          }}
        >
          <Typography
            sx={{
              color: '#ffffff',
              fontSize: '14px',
              whiteSpace: 'pre',
              letterSpacing: '0.3px',
              fontWeight: 500,
            }}
          >
            {t('PAGE_NUMBER_CONTROLLER', {
              pageNumber: pageNumber,
              totalPages: totalPages,
            })}
          </Typography>
        </Box>
      )}
      <Box
        sx={{
          backgroundColor: '#000000bf',
          display: 'flex',
          width: 'fit-content',
          borderTopRightRadius: '100px',
          borderBottomRightRadius: '100px',
        }}
      >
        <ToolButton
          title={t('ZOOM_OUT')}
          ToolIcon={RemoveIcon}
          onClick={event => handleZoomOut(event)}
          disabled={isZoomOutDisabled}
        />
        <ToolButton
          title={t('RESET_ZOOM')}
          ToolIcon={ZoomOutIcon}
          onClick={event => handleResetScale(event)}
          disabled={isResetZoomDisabled}
        />
        <ToolButton
          title={t('ZOOM_IN')}
          ToolIcon={AddIcon}
          onClick={event => handleZoomIn(event)}
          disabled={isZoomInDisabled}
          isLastButton
        />
      </Box>
    </Box>
  );
};

export default ToolContainer;