import React from 'react';
import { IconButton, makeStyles } from '@material-ui/core';
import FirstPageIcon from '@material-ui/icons/esm/FirstPage';
import NavigateBeforeIcon from '@material-ui/icons/esm/NavigateBefore';
import NavigateNextIcon from '@material-ui/icons/esm/NavigateNext';
import LastPageIcon from '@material-ui/icons/esm/LastPage';
import ZoomInIcon from '@material-ui/icons/esm/ZoomIn';
import ZoomOutIcon from '@material-ui/icons/esm/ZoomOut';
import CloudDownloadOutlinedIcon from '@material-ui/icons/esm/CloudDownloadOutlined';
import HighlightOffOutlinedIcon from '@material-ui/icons/esm/HighlightOffOutlined';
import { Typography } from '../../dataDisplay/typography/Typography';
import { useTranslation } from 'react-i18next';
const useStyles = makeStyles((theme) => ({
    controlPanel: {
        fontSize: '16px',
        backgroundColor: theme.palette.background.paper,
        borderRadius: '5px',
        width: 'fit-content',
        padding: theme.spacing(1),
        margin: '8px auto',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '10px'
    },
    pageActions: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '10px'
    },
    pageNumber: {
        display: 'flex',
        gap: 5,
        minWidth: '125px'
    }
}));
const ControlPanel = (props) => {
    const { pageNumber, numPages, setPageNumber, scale, setScale, file, closePDF, onClickDownload } = props;
    const isFirstPage = pageNumber === 1;
    const isLastPage = pageNumber === numPages;
    const { t } = useTranslation();
    const classes = useStyles();
    const goToFirstPage = () => {
        if (!isFirstPage)
            setPageNumber(1);
    };
    const goToPreviousPage = () => {
        if (!isFirstPage)
            setPageNumber(pageNumber - 1);
    };
    const goToNextPage = () => {
        if (!isLastPage)
            setPageNumber(pageNumber + 1);
    };
    const goToLastPage = () => {
        if (!isLastPage)
            setPageNumber(numPages);
    };
    const onPageChange = (e) => {
        const { value } = e.target;
        setPageNumber(Number(value));
    };
    const isMinZoom = scale < 0.6;
    const isMaxZoom = scale >= 2.0;
    const zoomOut = () => {
        if (!isMinZoom)
            setScale(scale - 0.1);
    };
    const zoomIn = () => {
        if (!isMaxZoom)
            setScale(scale + 0.1);
    };
    return (React.createElement("div", { className: classes.controlPanel }, React.createElement("div", { className: classes.pageActions }, React.createElement(IconButton, { size: "small", onClick: goToFirstPage, disabled: isFirstPage }, React.createElement(FirstPageIcon, null)), React.createElement(IconButton, { size: "small", onClick: goToPreviousPage, disabled: isFirstPage }, React.createElement(NavigateBeforeIcon, null)), React.createElement("div", null, React.createElement("div", { className: classes.pageNumber }, React.createElement(Typography, null, t('Page'), " "), React.createElement("input", { name: "pageNumber", type: "number", min: 1, max: numPages || 1, style: {
            padding: 0,
            paddingLeft: 1,
            margin: 0,
            textAlign: 'end'
        }, value: pageNumber, onChange: onPageChange }), ' ', React.createElement(Typography, null, "of ", numPages))), React.createElement(IconButton, { size: "small", onClick: goToNextPage, disabled: isLastPage }, React.createElement(NavigateNextIcon, null)), React.createElement(IconButton, { size: "small", onClick: goToLastPage, disabled: isLastPage }, React.createElement(LastPageIcon, null))), React.createElement("div", { className: classes.pageActions }, React.createElement(IconButton, { size: "small", onClick: zoomOut, disabled: isMinZoom }, React.createElement(ZoomOutIcon, null)), React.createElement(Typography, null, (scale * 100).toFixed(), "%"), React.createElement(IconButton, { size: "small", onClick: zoomIn, disabled: isMaxZoom }, React.createElement(ZoomInIcon, null))), React.createElement("div", null, React.createElement(IconButton, { href: file, size: "small", onClick: onClickDownload }, React.createElement(CloudDownloadOutlinedIcon, null))), React.createElement("div", null, React.createElement(IconButton, { size: "small", onClick: closePDF }, React.createElement(HighlightOffOutlinedIcon, null)))));
};
export default ControlPanel;
//# sourceMappingURL=ControlPanel.js.map