import {Card} from "@mui/material";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import React from "react";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

const role = (myRole) => {
    switch (myRole) {
        case "ADMIN":
            return "Администратор";
        case "ADMIN_NOT_BARMEN":
            return "Управляющий";
        default:
            return null;
    }
}

export function BarItem({row, changeHandler, all, enterExist}) {
    return (
        <Card sx={{mb: 1, height: '100px', display: 'relative', p: 1}}>
            <Stack direction='row' justifyContent='start' alignItems='start'>
                <Box sx={{width: '75%', pr: 2}}>
                    <Typography variant='h6'>{row.name}</Typography>
                    <Typography>{role(row.myRole)}</Typography>
                </Box>
                <Stack sx={{width: '25%'}} spacing={1} justifyContent='flex-end' display='flex'>
                    <Typography color={row.open ? 'green' : 'red'}>{row.open ? "Бар открыт" : "Бар закрыт"}</Typography>
                    <Button variant='contained'
                            color={row.enter ? 'error' : 'success'}
                            onClick={() => changeHandler(row, !row.enter)}
                            disabled={!row.enter && enterExist}
                    >
                        {all ? "Добавить" : row.enter ? "Выйти" : "Войти"}
                    </Button>
                </Stack>
            </Stack>
        </Card>
    )
}