import { Flex } from "@mantine/core";
import { IconMinus, IconRectangle, IconX } from "@tabler/icons-react";
import classes from './WindowsFrameButtons.module.css'
import { useWindowActions } from "@/app/hooks/useWindowActions";
import { cx } from "@/app/utils/style";
import { useWindowState } from "@/app/hooks/useWindowState";
import { useWindowFocus } from "@/app/hooks/useWindowFocus";

export function WindowsFrameButtons() {
    const {close, minimize, toggle} = useWindowActions();
    const windowState = useWindowState();
    const focus = useWindowFocus();

    return (<>
        <Flex gap={'sm'} style={{
            cursor: 'pointer',
            appRegion: 'no-drag'
        }} pos={'absolute'} right={4} h={20} align="center" justify="center">
            <Flex w={20} onClick={minimize} className={cx(
                    classes.minimize_btn,
                    !focus && classes.disabled,
                    //windowState.isMinimized && classes.disabled,
                    !windowState.isResizable && classes.disabled
            )}>
                <IconMinus stroke={4} size={12}></IconMinus>
            </Flex>
            <Flex w={20} onClick={toggle} className={cx(
                    classes.maximize_btn,
                    !focus && classes.disabled,
                    //windowState.isMaximized && classes.disabled,
                    (!windowState.isResizable && !windowState.isFullScreen) && classes.disabled
            )}>
                <IconRectangle stroke={3} size={12}></IconRectangle>
            </Flex>
            <Flex w={20} onClick={close} className={cx(
                classes.close_btn,
                !focus && classes.disabled,
                !windowState.isClosable && classes.disabled
            )}>
                <IconX stroke={3} size={12}></IconX>
            </Flex>
        </Flex>
    </>);

}