import {useTheme} from '@mui/material/styles';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import {useTranslation} from 'react-i18next';
import usePermissions from '../../hooks/usePermissions';

interface Props {
  getOnClickFunction: (addSelf: boolean) => () => void;
  registered: boolean;
  variant: 'waitingList' | 'travel';
  disabled?: boolean;
}

const ADD_TO_LOCALE = {
  waitingList: 'travel.passengers.add_to_waitingList',
  travel: 'travel.passengers.add_to_travel',
};

const AddPassengerButtons = ({
  getOnClickFunction,
  registered,
  variant,
  disabled,
}: Props) => {
  const theme = useTheme();
  const {t} = useTranslation();
  const {
    userPermissions: {canJoinTravels, canAddToTravel},
  } = usePermissions();

  const containerSx = {padding: theme.spacing(1), textAlign: 'center'};
  const textSx = {
    padding: theme.spacing(1, 8),
    [theme.breakpoints.down(440)]: {
      padding: theme.spacing(1, 4),
    },
  };

  return (
    <Box sx={containerSx}>
      {canJoinTravels && (
        <Box sx={containerSx}>
          <Button
            sx={textSx}
            variant="contained"
            color="primary"
            fullWidth
            onClick={getOnClickFunction(true)}
            disabled={disabled || registered}
          >
            {t(
              registered
                ? 'travel.passengers.registered'
                : 'travel.passengers.add_me'
            )}
          </Button>
        </Box>
      )}
      {canAddToTravel && (
        <Box sx={containerSx}>
          <Button
            sx={textSx}
            variant="outlined"
            color="primary"
            fullWidth
            onClick={getOnClickFunction(false)}
            disabled={disabled}
          >
            {t(ADD_TO_LOCALE[variant])}
          </Button>
        </Box>
      )}
    </Box>
  );
};

export default AddPassengerButtons;
