import { alpha, Box, Typography } from '@mui/material';
import { ipcRenderer } from 'electron';
import React from 'react';
import CloseIcon from '@mui/icons-material/Close';
import AspectRatioIcon from '@mui/icons-material/AspectRatio';
import RemoveIcon from '@mui/icons-material/Remove';

const ipc = require('electron').ipcRenderer;

const AppbarButton = ({ onClick, bgcolor, children }: any) => (
    <Box onClick={onClick} sx={{
        cursor: 'pointer',
        px: 0.4
    }}>
        <Box sx={{
            borderRadius: '50%',
            display: 'flex',
            height: 8,
            width: 8,
            justifyContent: 'center',
            alignItems: 'center',
            p: 0.1,
            bgcolor,
        }}>
            {children}
        </Box>
    </Box>
);

const WindowAppbar = () => {
    const handleWindowToggle = () => ipc.send('window-toggle');
    const handleMinimize = () => ipc.send('window-minimize');
    const handleClose = () => ipc.send('window-close');

    const buttons = [
        {
            onClick: handleClose,
            bgcolor: 'error.main',
            icon: <CloseIcon id="icon" sx={{ color: 'black', opacity: 0, fontSize: 8, mr: 0.1 }} />
        },
        {
            onClick: handleMinimize,
            bgcolor: 'warning.main',
            icon: <RemoveIcon id="icon" sx={{ color: 'black', fontSize: 5, opacity: 0 }} />
        },
        {
            onClick: handleWindowToggle,
            bgcolor: 'success.main',
            icon: <AspectRatioIcon id="icon" sx={{ color: 'black', fontSize: 5, opacity: 0 }} />
        }
    ];

    return (
        <Box
            id="appbar"
            onDoubleClick={handleWindowToggle}
            sx={{
                width: 'calc(100% - 1.55rem)',
                height: 22,
                userSelect: 'none',
                display: 'flex',
                flexDirection: 'row',
                background: 'transparent',
                justifyContent: 'flex-start',
                alignItems: 'center',
                px: 1.5,
                gap: 1,
                zIndex: (theme) => theme.zIndex.appBar
            }}>
            <Box id="appbar-controls" sx={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                '&:-webkit-app-region': 'no-drag!important',
                "&:hover #icon": {
                    opacity: 1
                }
            }}>
                {buttons.map((button, index) => (
                    <AppbarButton key={index} onClick={button.onClick} bgcolor={button.bgcolor}>
                        {button.icon}
                    </AppbarButton>
                ))}
            </Box>
            <Typography variant="subtitle2" sx={{
                userSelect: 'none',
                fontSize: 13,
                width: 'fit-content',
                fontWeight: 800,
                letterSpacing: 1,
                pt: 0.3,
                color: (theme) => alpha(theme.palette.text.primary, 0.1)
            }}>
                Ultima
            </Typography>
        </Box>
    );
};

export default WindowAppbar;