import {Affix, Button, Group, rem, Stack} from "@mantine/core";
import ArrowUpIcon from "mdi-react/ArrowUpIcon";
import HomeIcon from "mdi-react/HomeIcon";
import {useNavigate} from "react-router";
import {useWindowScroll} from "@mantine/hooks";
import {ThemeToggle} from "~/components/subs/ThemeToggle.tsx";
import {roundThemeButton} from "~/styles.ts";

export default function () {
    const navigate = useNavigate();
    const [scroll, scrollTo] = useWindowScroll();

    const buttonSize = 23;
    const circleSize = 55;

    return (
        <>
            <Affix position={{ bottom: 20, right: 20 }}>
                <Group dir="reverse">
                    <Button
                        radius={circleSize}
                        w={circleSize}
                        h={circleSize}
                        p={0}
                        disabled={scroll.y <= 0}
                        onClick={() => scrollTo({ y: 0 })}
                    >
                        <ArrowUpIcon size={buttonSize} />
                    </Button>

                    <ThemeToggle extraStyle={roundThemeButton} iconStyle={{width: rem(buttonSize - 3), height: rem(buttonSize - 3)}}/>

                    <Button
                        radius={circleSize}
                        w={circleSize}
                        h={circleSize}
                        p={0}
                        onClick={() => navigate("/")}
                    >
                        <HomeIcon size={buttonSize}/>
                    </Button>
                </Group>

            </Affix>
        </>
    )
}