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 'react-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 {
 32    caroster_plus_name,
 33    caroster_plus_description,
 34    caroster_plus_price,
 35    caroster_plus_payment_link,
 36  } = modulesSettings;
 37
 38  return (
 39    <Card
 40      sx={{
 41        position: 'relative',
 42        maxWidth: '100%',
 43        width: '350px',
 44      }}
 45    >
 46      <Box
 47        display="flex"
 48        justifyContent="space-between"
 49        width="100%"
 50        p={2}
 51        py={1}
 52      >
 53        <Typography variant="h4" pt={1}>
 54          {caroster_plus_name}
 55        </Typography>
 56        <Box pt={1}>
 57          <Tooltip
 58            title={t(
 59              canEditEventOptions()
 60                ? 'options.plus.activationOK'
 61                : 'options.plus.activationForbiden'
 62            )}
 63          >
 64            <Box>
 65              <Button
 66                href={`${caroster_plus_payment_link}?client_reference_id=${event.uuid}&locale=${locale}`}
 67                disabled={!canEditEventOptions()}
 68                sx={{
 69                  backgroundColor: 'primary.light',
 70                  color: 'primary.main',
 71                  fontWeight: 'bold',
 72                  borderRadius: 8,
 73                  pl: 2,
 74                  pr: 1,
 75                }}
 76              >
 77                {caroster_plus_price} {caroster_plus_price && 'EUR'}{' '}
 78                <ChevronRightIcon />
 79              </Button>
 80            </Box>
 81          </Tooltip>
 82        </Box>
 83      </Box>
 84      <Box p={2}>
 85        <Markdown
 86          variant="caption"
 87          sx={{
 88            '& ul': {
 89              pl: 2,
 90            },
 91          }}
 92        >
 93          {caroster_plus_description}
 94        </Markdown>
 95      </Box>
 96      <Divider />
 97      <ListItem
 98        sx={{p: 2}}
 99        secondaryAction={
100          <Chip label={t('options.plus.creator')} size="small" />
101        }
102      >
103        <ListItemIcon>
104          <AccountCircleOutlinedIcon />
105        </ListItemIcon>
106        <ListItemText primary={event.email} />
107      </ListItem>
108    </Card>
109  );
110};
111
112export default CarosterPlusOption;