import Typography from "@mui/material/Typography";
import {Card, FormControlLabel} from "@mui/material";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Switch from "@mui/material/Switch";
import * as React from "react";

export function VisitorItem({visitor, changeHandler, open}) {

    const getRole = (role) => {
        switch (role) {
            case "USER":
                return 'Посетитель';
            case "BARMEN":
                return 'Бармен';
            case "ADMIN":
                return 'Админ';
            default:
                return "Посетитель";
        }
    }

    return (
        <Card sx={{mb: 1, p: 1, borderRadius: '10px', maxWidth: '600px'}}>
            <Stack>
                <Typography variant='h6'>{`${visitor.name} ${!visitor.lastName ? "" : visitor.lastName}`}</Typography>
                <Box display='flex' justifyContent='flex-end'>
                    <Typography>{getRole(visitor.role)}</Typography>
                </Box>
                <Box display='flex' justifyContent='flex-start'>
                    <FormControlLabel
                        control={
                            <Switch
                                checked={visitor.invited}
                                disabled={open}
                                onChange={() => changeHandler(visitor)}
                            />}
                        label="Приглашен" labelPlacement='start'/>
                </Box>
                <Box display='flex' justifyContent='flex-end'>
                    <Typography
                        variant='body2'
                        color={visitor.isActive ? 'green' : 'red'}
                    >{visitor.isActive ? "В баре" : "Не вошел в бар"}</Typography>
                </Box>
            </Stack>
        </Card>
    )
}