import { Card } from '../card';
import createClasses from './styles';
import { CustomIcon } from '../../custom-icon';
import type { JarvisDataCardProps } from './types';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { Avatar } from '../../avatar';
import { Link } from '../../@navigation/link';
import { ASSETS_URL } from '../../../consts/common';
import { TextWithTooltip } from '../../text-with-tooltip';

const DataCard = (props: JarvisDataCardProps) => {
  const { title, icon, onClick, number, userInfo } = props;
  const styles = createClasses({});

  return (
    <Grid container onClick={onClick} className={styles.cardCon}>
      {!userInfo ? (
        <>
          <Grid item>
            {icon && <CustomIcon customSize={24} src={icon} />}
            <Typography className={styles.title} variant="body2">
              {title}:{' '}
              {
                <Typography component="span" className={styles.number}>
                  {number}
                </Typography>
              }
            </Typography>

            <Typography onClick={onClick} className={styles.link}>
              See All {title}
            </Typography>
          </Grid>
          <Grid item className={styles.gridItem1}>
            <CustomIcon
              customSize={32}
              rotateDeg={-90}
              src={`${ASSETS_URL}/icons2/icon_arrow.svg`}
            />
          </Grid>
        </>
      ) : (
        <>
          <Grid item className={styles.userAvatar}>
            <Avatar {...userInfo} customSize={48} />
          </Grid>
          <Grid item className={styles.userInfo} data-testid="userInfo">
            <TextWithTooltip
              numOfLines={1}
              text={userInfo.name || ''}
              title={''}
              textClassName={styles.name}
            />
            <Grid item>
              <Typography component="span" className={styles.userRole}>
                {userInfo.userRole}
              </Typography>
            </Grid>
            <Grid item>
              <Link className={styles.userEmail} href={`mailto:${userInfo.userEmail}`}>
                Contact Person by Mail
              </Link>
            </Grid>
          </Grid>
        </>
      )}
    </Grid>
  );
};

export const JarvisDataCard = (props: JarvisDataCardProps) => {
  const { userInfo } = props;
  const styles = createClasses({ userInfo: !!userInfo });
  return <Card className={styles.card} indicator={false} children={<DataCard {...props} />} />;
};

export default JarvisDataCard;