1import Box from '@mui/material/Box';
  2import Button from '@mui/material/Button';
  3import Card from '@mui/material/Card';
  4import Typography from '@mui/material/Typography';
  5import Chip from '@mui/material/Chip';
  6import Divider from '@mui/material/Divider';
  7import Tooltip from '@mui/material/Tooltip';
  8import ListItem from '@mui/material/ListItem';
  9import ListItemIcon from '@mui/material//ListItemIcon';
 10import ListItemText from '@mui/material/ListItemText';
 11import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 12import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 13import {useTranslation} from 'next-i18next';
 14import Markdown from '../../components/Markdown';
 15import useLocale from '../../hooks/useLocale';
 16import usePermissions from '../../hooks/usePermissions';
 17import {Event as EventType, Module} from '../../generated/graphql';
 18
 19interface Props {
 20  event: EventType;
 21  modulesSettings: Module;
 22}
 23
 24const CarosterPlusOption = ({event, modulesSettings}: Props) => {
 25  const {t} = useTranslation();
 26  const {
 27    userPermissions: {canEditEventOptions},
 28  } = usePermissions();
 29  const {locale} = useLocale();
 30
 31  const {caroster_plus_name, caroster_plus_description, caroster_plus_price} =
 32    modulesSettings;
 33
 34  return (
 35    <Card
 36      sx={{
 37        position: 'relative',
 38        maxWidth: '100%',
 39        width: '480px',
 40      }}
 41    >
 42      <Box
 43        display="flex"
 44        justifyContent="space-between"
 45        width="100%"
 46        p={2}
 47        py={1}
 48      >
 49        <Typography variant="h4" pt={1}>
 50          {caroster_plus_name}
 51        </Typography>
 52        <Box pt={1}>
 53          <Tooltip
 54            title={t(
 55              canEditEventOptions()
 56                ? 'options.plus.activationOK'
 57                : 'options.plus.activationForbiden'
 58            )}
 59          >
 60            <Box>
 61              <Button
 62                href={`/${locale}/e/${event.uuid}/prices`}
 63                disabled={!canEditEventOptions()}
 64                sx={{
 65                  backgroundColor: 'primary.light',
 66                  color: 'primary.main',
 67                  fontWeight: 'bold',
 68                  borderRadius: 8,
 69                  pl: 2,
 70                  pr: 1,
 71                }}
 72              >
 73                {caroster_plus_price} {caroster_plus_price && 'EUR'}{' '}
 74                <ChevronRightIcon />
 75              </Button>
 76            </Box>
 77          </Tooltip>
 78        </Box>
 79      </Box>
 80      <Box p={2}>
 81        <Markdown
 82          variant="caption"
 83          sx={{
 84            '& ul': {
 85              pl: 2,
 86            },
 87          }}
 88        >
 89          {caroster_plus_description}
 90        </Markdown>
 91      </Box>
 92      <Divider />
 93      <ListItem
 94        sx={{p: 2}}
 95        secondaryAction={
 96          <Chip label={t('options.plus.creator')} size="small" />
 97        }
 98      >
 99        <ListItemIcon>
100          <AccountCircleOutlinedIcon />
101        </ListItemIcon>
102        <ListItemText primary={event.email} />
103      </ListItem>
104    </Card>
105  );
106};
107
108export default CarosterPlusOption;