import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import useSnackbar from '@material-hu/components/design-system/Snackbar';

import { useAuth } from 'src/contexts/JWTContext';
import { canCreateAcknowledgements } from 'src/pages/dashboard/acknowledgements/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import ProfilePicture from 'src/components/user/ProfilePicture';

import { useCreateAcknowledgementDrawer } from '../hooks/useAcknowledgementDrawer';

export const AcknowledgementCreateCard = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { user, permissions } = useAuth();
  const { enqueueSnackbar } = useSnackbar();
  const canCreateAck = canCreateAcknowledgements(permissions);

  const pointsToGive = user?.acknowledgementsToGiveLeft;

  const { openCreateAcknowledgementDrawer } = useCreateAcknowledgementDrawer();

  if (!canCreateAck || !user) return null;

  const handleClickCreateAcknowledgement = () => {
    if (pointsToGive && pointsToGive > 0) {
      openCreateAcknowledgementDrawer();
    } else {
      enqueueSnackbar({
        title: t('no_points_to_give'),
        variant: 'error',
      });
    }
  };

  return (
    <CardContainer
      fullWidth
      sx={{ mb: 2, flexShrink: 0 }}
    >
      <Stack sx={{ alignItems: 'center', gap: 1, flexDirection: 'row' }}>
        <ProfilePicture user={user} />
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {getFullName(user)}
        </Typography>
      </Stack>
      <Stack
        onClick={handleClickCreateAcknowledgement}
        sx={{
          mt: 2,
          px: 2,
          py: 1,
          border: '1px solid',
          borderColor: ({ palette }) => palette.new.border.neutral.default,
          borderRadius: 1,
          cursor: 'text',
          '&:hover': {
            borderColor: ({ palette }) => palette.primary.main,
          },
        }}
      >
        <Typography
          variant="globalS"
          color="text.secondary"
        >
          {t('send_recognition')}...
        </Typography>
      </Stack>
    </CardContainer>
  );
};