import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {SvgProps} from 'react-native-svg';
import ShortcutLogo from '@assets/shortcut.svg';
import {
  Badge,
  Image,
  ImageSource,
  Pill,
  PressableCardContainer,
  Typography,
} from '@components';
import {Icon, IconTypes} from '@interfaces/icon';
import {separateSentence} from '@modules/widgets/utils';
import {ICON_SIZE} from '@modules/widgets/constants';
import {checkIsIcon} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const DefaultIcon = <ShortcutLogo width={ICON_SIZE} height={ICON_SIZE} />;

export interface WidgetCardProps {
  label: string;
  onPress: () => void;
  logo?: ImageSource | Icon;
  unreadMessages?: number;
  Svg?: React.FC<SvgProps>;
  svgProps?: SvgProps;
  isNew?: boolean;
}

function WidgetCard({
  label,
  onPress,
  logo,
  unreadMessages,
  Svg,
  isNew,
  svgProps,
}: WidgetCardProps) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const isIcon = checkIsIcon(logo);
  const formattedLabel = separateSentence(label);
  const hasBigValue = !!unreadMessages && unreadMessages > 99;

  return (
    <View style={styles.container}>
      <Badge
        show={!!unreadMessages}
        value={unreadMessages}
        style={[styles.unreadMessages, hasBigValue && styles.bigUnreadMessages]}
      />
      <PressableCardContainer
        elevation
        backgroundColor={theme.background.elements.default}
        onPress={onPress}
        style={styles.cardTouchable}
        accessibilityLabel={formattedLabel}>
        {isIcon && logo.type === IconTypes.EMOJI ? (
          <Typography allowFontScaling={false} style={styles.cardEmoji}>
            {logo.value}
          </Typography>
        ) : Svg ? (
          <Svg width={ICON_SIZE} height={ICON_SIZE} {...svgProps} />
        ) : isIcon && logo.value ? (
          <Image
            source={{uri: logo.value}}
            loaderType="none"
            style={styles.cardImage}
            renderError={DefaultIcon}
          />
        ) : logo ? (
          <Image
            source={logo as ImageSource}
            contentFit="contain"
            loaderType="none"
            style={styles.cardImage}
            renderError={DefaultIcon}
          />
        ) : (
          DefaultIcon
        )}
        {isNew && (
          <View style={styles.newMarker}>
            <Pill text={t('general.new')} variant="success" />
          </View>
        )}
      </PressableCardContainer>
      <Typography
        adjustsFontSizeToFit
        variant="xs"
        weight="semiBold"
        color={theme.text.neutral.lighter}
        style={styles.label}
        numberOfLines={2}>
        {formattedLabel}
      </Typography>
    </View>
  );
}

export default memo(WidgetCard);