import { useMemo } from 'react';
import { Grid, Typography } from '@mui/material';
import { Card } from '../card';
import { CustomIcon } from '../../custom-icon';
import { TextWithBG } from '../../text-with-bg';
import { Button } from '../../button';
import createClasses from './styles';
import { ASSETS_URL } from '../../../consts/common';
import { TextWithTooltip } from '../../text-with-tooltip';

export interface ApplicationUserCardProps {
  isFavorite: boolean;
  tagText: string;
  tagColor: string;
  icon: string;
  appName: string;
  appVersion: string;
  btnTxt?: string;
  connectHandler: () => void;
  addToFavorite?: () => void;
  removeToFavorite?: () => void;
}

export function ApplicationUserCard(props: ApplicationUserCardProps) {
  const {
    isFavorite,
    tagColor,
    tagText,
    icon,
    appName,
    appVersion,
    btnTxt = 'Connect',
    connectHandler,
    addToFavorite,
    removeToFavorite
  } = props;

  const tagTextUC = useMemo(() => tagText.toUpperCase(), [tagText]);
  const classes = createClasses();

  return (
    <Card
      classes={{
        root: classes.card
      }}
      indicator={false}
      children={
        <Grid container direction={'column'}>
          <Grid item className={classes.starIconGrid}>
            {isFavorite ? (
              <CustomIcon
                onClick={removeToFavorite}
                color="#E49307"
                className={classes.starIcon}
                src={`${ASSETS_URL}/icons/icon_star.svg`}
              />
            ) : (
              <CustomIcon
                onClick={addToFavorite}
                color="#394463"
                className={classes.starIcon}
                src={`${ASSETS_URL}/icons/icon_star_stroked.svg`}
              />
            )}
          </Grid>
          <Grid item>
            <img className={classes.image} src={icon} alt="" width={88} height={88} />
          </Grid>
          <Grid item>
            <TextWithBG
              backgroundColor={tagColor}
              children={tagTextUC}
              className={classes.tagText}
            />
          </Grid>
          <Grid item>
            <TextWithTooltip text={appName} numOfLines={1} className={classes.appName} />
          </Grid>
          <Grid item>
            <Typography className={classes.appVersion}>{appVersion}</Typography>
          </Grid>
          <Grid item className={classes.button}>
            <Button
              onClick={connectHandler}
              clickArea={false}
              startIconUrl={`${ASSETS_URL}/icons/icon_open.svg`}
              children={btnTxt}
            />
          </Grid>
        </Grid>
      }
    />
  );
}

export default ApplicationUserCard;