import { FC } from 'react';
import { Trans } from 'react-i18next';

import AutorenewOutlinedIcon from '@material-hu/icons/material/AutorenewOutlined';
import CallIcon from '@material-hu/icons/material/Call';
import EmailIcon from '@material-hu/icons/material/Email';
import MonetizationOnOutlinedIcon from '@material-hu/icons/material/MonetizationOnOutlined';
import PersonIcon from '@material-hu/icons/material/Person';
import Box from '@material-hu/mui/Box';
import CardContent from '@material-hu/mui/CardContent';
import IconButton from '@material-hu/mui/IconButton';
import { useTheme } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import UserInfoDisplay from 'src/pages/dashboard/recognitions/components/UserInfoDisplay';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { UserSones, UserData } from 'src/types/recognitions';
import { hasValue } from 'src/utils/recognitions';

export type CardUserInfoProps = {
  user: UserData;
  sones: UserSones;
  onRefetch: () => void;
};

export const CardUserInfo: FC<CardUserInfoProps> = props => {
  const { user, sones, onRefetch } = props;

  const { t } = useTranslation();
  const theme = useTheme();

  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <CardContent sx={{ p: 2 }}>
      {hasValue(user.FirstName) && hasValue(user.LastName) && (
        <UserInfoDisplay
          Icon={PersonIcon}
          dataMessage={
            <Trans
              i18nKey="USER_NAME_INFO"
              values={{ firstName: user.FirstName, lastName: user.LastName }}
              t={t}
              components={{ bold: <strong /> }}
            />
          }
        />
      )}
      {hasValue(user.EmailAddress) && (
        <UserInfoDisplay
          Icon={EmailIcon}
          dataMessage={
            <Trans
              i18nKey="USER_EMAIL_INFO"
              values={{ email: user.EmailAddress }}
              t={t}
              components={{ bold: <strong /> }}
            />
          }
        />
      )}
      {hasValue(user.PhoneNumber) && (
        <UserInfoDisplay
          Icon={CallIcon}
          dataMessage={
            <Trans
              i18nKey="USER_PHONE_INFO"
              values={{ phone: user.PhoneNumber }}
              t={t}
              components={{ bold: <strong /> }}
            />
          }
        />
      )}
      {sones && (
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
          <MonetizationOnOutlinedIcon
            fontSize="small"
            sx={{ mr: 0.6 }}
          />
          <Typography sx={{ fontSize: isMobile ? '14px' : '16px' }}>
            <Trans
              i18nKey="USER_SONES_INFO"
              values={{ sones: sones.amount }}
              t={t}
              components={{ bold: <strong /> }}
            />
          </Typography>
          <Tooltip
            title={t('UPDATE_SONES')}
            placement="top"
          >
            <IconButton
              sx={{ ml: 1 }}
              onClick={onRefetch}
            >
              <AutorenewOutlinedIcon fontSize="small" />
            </IconButton>
          </Tooltip>
        </Box>
      )}
    </CardContent>
  );
};

export default CardUserInfo;