fms/components/elements/tokens/index.tsx

import styles from './styles.module.css'
import {Autocomplete, IconButton, TextareaAutosize, TextField} from "@mui/material";
import {useContext, useEffect, useState} from "react";
import Context from "../../../context/token";
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
import DeleteForeverOutlined from '@mui/icons-material/DeleteForeverOutlined';
import Modal from '@mui/material/Modal';
import Fade from '@mui/material/Fade';
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Grid from "@mui/material/Grid";
import ConfirmDialog from "../confirm-dialog";

const style = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '100%',
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
};

export default function Tokens() {
    const {token, tokens, addToken, deleteToken} = useContext(Context)
    const [value, setValue] = useState('')
    const [showAddForm, setShowAddForm] = useState(false)
    const [showConfirm, setShowConfirm] = useState(false)

    let variants = tokens.map((token, index) => ({
        ...token,
        label: token.host
    }));

    useEffect(() => {
        setShowAddForm(!token)
    }, [token])

    console.log('token34344', token);
    return (
        <>
            <Grid container>
                <Grid item xs={2}>
                    <Autocomplete
                        value={{
                            ...token,
                            label: token?.host ?? ''
                        }}
                        onChange={(event: any, newValue: string | null) => {
                            console.log('newValue', newValue);
                            setValue(newValue || '');
                        }}
                        disablePortal
                        options={variants}
                        renderInput={(params) => <TextField {...params} label="Tokens"/>}
                    />
                </Grid>
                <Grid item xs={1}>
                    <IconButton onClick={() => setShowAddForm(true)} title={`Add new token`}
                                aria-label="Add new token">
                        <AddCircleOutlineOutlinedIcon/>
                    </IconButton>
                    <IconButton onClick={() => setShowConfirm(true)} title={`Delete current token`}
                                aria-label="Add new token">
                        <DeleteForeverOutlined/>
                    </IconButton>
                </Grid>
            </Grid>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                open={showAddForm}
                onClose={() => setShowAddForm(false)}
                closeAfterTransition
                slots={{backdrop: Backdrop}}
                slotProps={{
                    backdrop: {
                        timeout: 500,
                    },
                }}
            >
                <Fade in={showAddForm}>
                    <Box sx={style}>
                        <TextareaAutosize
                            placeholder={`Pass JWT token`}
                            minRows={25}
                            style={{width: '100%'}}
                            onInput={(event: any) => {
                                if (addToken(event.target.value)) {
                                    setShowAddForm(false)
                                }
                            }}
                        />
                    </Box>
                </Fade>
            </Modal>
            <ConfirmDialog
                title={`Delete curent token`}
                open={showConfirm}
                agreeCallback={async () => {
                    let tokenId = token?.id || null
                    if (tokenId) {
                        deleteToken(tokenId)
                    }
                    setShowConfirm(false)
                }}

                closeCallback={() => {setShowConfirm(false)}}>
                Confirm?
            </ConfirmDialog>
        </>
    )
}