import {AppBar, Button, Container, Stack, Toolbar, Typography, useTheme} from "@mui/material";
import {useTranslations} from "next-intl";
import {useRouter} from "next/router";
import {useState} from "react";
import usePrint from "@/lib/app/hooks/usePrint";

function Header({drawerWidth, handleDrawerToggle}) {
    const theme = useTheme();
    const t = useTranslations()
    const router = useRouter()
    const {printDetails} = usePrint()
    const [disabled, setDisabled] = useState(false)

    return (
        <AppBar
            position="fixed"
            sx={{
                width: '100%',
                displayPrint: 'none'
            }}
        >
            <Container maxWidth="xxl">
                <Toolbar
                    disableGutters
                    sx={{
                        display: "flex",
                    }}
                >
                    <Stack
                        direction="row"
                        sx={{
                            flex: 1,
                            position: "relative",
                            ...theme.mixins.toolbar,
                        }}
                    >
                        <Button onClick={() => {
                            setDisabled(true);
                            if (disabled) return
                            router.back()
                        }}
                                size={'large'} sx={{
                            color: "inherit",
                        }}>{t('button_back_to_previous')}</Button>
                    </Stack>
                    <Stack
                        alignItems={'center'}
                        justifyContent={'center'}
                        sx={{
                            flex: 1,
                            position: "relative",
                            ...theme.mixins.toolbar,
                        }}
                        spacing={1}
                    >
                        <Typography>{printDetails.title}</Typography>
                        <Typography variant={'body2'}>{'تعداد صفحه:'} {printDetails.count}</Typography>
                    </Stack>
                    <Stack direction="row" spacing={4} justifyContent="flex-end" sx={{flex: 1}}>
                        <Button onClick={() => {
                            if (disabled) return;
                            print()
                        }} size={'large'} variant={'contained'}
                                color={'secondary'}>{t('btn_print')}</Button>
                    </Stack>
                </Toolbar>
            </Container>
        </AppBar>
    );
}

export default Header;