import {Burger, Group, Image, Text} from "@mantine/core";
import {ThemeToggle} from "./subs/ThemeToggle.tsx";
import React, {useEffect, useState} from "react";


export function PageHeader({opened, toggle, appendTitle}: {opened: boolean, toggle: () => void, appendTitle?: string}) {
    const [width, setWidth] = useState(window.innerWidth)
    // const [height, setHeight] = useState(window.innerHeight)
    const [title, setTitle] = useState('Performance Test Dashboard');

    useEffect(() => {
        const handleResize = () => {
            setWidth(window.innerWidth);
            // setHeight(window.innerHeight);
        };

        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    // useEffect(() => {
    //     const titleElement = document.querySelector('title');
    //     const observer = new MutationObserver((mutations) => {
    //         mutations.forEach((mutation) => {
    //             mutation.target.textContent && setTitle(mutation.target.textContent);
    //         });
    //     });
    //
    //     if (titleElement) {
    //         observer.observe(titleElement, { childList: true });
    //     }
    //
    //     return () => {
    //         observer.disconnect();
    //     };
    // }, []);


    return (
        <Group justify="space-between">
            <Group>
                <Burger
                    opened={opened}
                    onClick={toggle}
                    hiddenFrom="sm"
                    size="sm"
                />
                <Image src="/icon.png" w={30} h={30}/>
                {width >= 290 && <Text size="lg" fw={700}>{title}</Text>}
                {appendTitle && <Text size="sm">{appendTitle}</Text>}
            </Group>

            <Group>
                <ThemeToggle/>
            </Group>

        </Group>
    )
}