import {AppBar, Container, IconButton, Theme, Toolbar, Typography} from "@material-ui/core";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import UndoIcon from "@material-ui/icons/Undo";
import RedoIcon from "@material-ui/icons/Redo";
import GitHubIcon from "@material-ui/icons/GitHub";
import React from "react";
import {makeStyles} from "@material-ui/core/styles";
import {useDispatch, useSelector} from "react-redux";
import {
    selectApiKey,
    toggleApiKeyDialog,
} from "../slices/editorSlice";
import {ActionCreators} from "redux-undo";

const useStyles = makeStyles((theme: Theme) => ({
    buttonGroup: {
        marginRight: theme.spacing(2),
    },
    apiKeyInput: {
        minWidth: '400px',
    },
}));

export default function Header() {
    const dispatch = useDispatch();
    const classes = useStyles();

    const apiKey = useSelector(selectApiKey);
    const apiKeyPresent = !!apiKey;
    const handleApiKeyDialogOpen = () => {
        dispatch(toggleApiKeyDialog(true));
    };
    const handleUndoClick = () => {
        dispatch(ActionCreators.undo());
    };
    const handleRedoClick = () => {
        dispatch(ActionCreators.redo());
    };

    return <AppBar position="static">
        <Container maxWidth={"lg"}>
            <Toolbar variant="regular" disableGutters={true}>
                <div className={classes.buttonGroup}>
                    <Typography variant="h6" color="inherit">
                        Prompts.ai
                    </Typography>
                </div>
                <div className={classes.buttonGroup}>
                    <IconButton onClick={handleApiKeyDialogOpen}><VpnKeyIcon color={apiKeyPresent ? "action" : "error"}/></IconButton>
                </div>
                <div className={classes.buttonGroup}>
                    <IconButton onClick={handleUndoClick}><UndoIcon/></IconButton>
                    <IconButton onClick={handleRedoClick}><RedoIcon/></IconButton>
                </div>
                <div className={classes.buttonGroup}>
                    <IconButton aria-label="GitHib" onClick={() => window.open('https://github.com/sevazhidkov/prompts-ai', '_blank')}>
                        <GitHubIcon fontSize={'small'}/>
                    </IconButton>
                </div>
            </Toolbar>
        </Container>
    </AppBar>
}