import {Image, Pressable, Text, View} from 'react-native';

import {colorToRgba} from '../../helpers/colorToRgba';
import {renderIcon} from '../../helpers/renderIcon';
import {ratingCardStyles} from '../../theme';
import type {FloatingActionCardProps} from '../../types';

export const FloatingActionCard = ({
  accessibilityHint,
  accessibilityLabel,
  backgroundColor: bgColor,
  bottom = 40,
  decimals = 1,
  description,
  icon,
  iconColor = '#FFD700',
  image,
  onPress,
  rating,
  testID,
  textColor = '#000000',
  title,
  width = '90%',
}: FloatingActionCardProps) => {
  const backgroundColor = colorToRgba(bgColor ?? '#FFFFFF', 0.9);

  return (
    <Pressable
      accessibilityRole={onPress ? 'button' : undefined}
      accessibilityLabel={accessibilityLabel ?? title}
      accessibilityHint={accessibilityHint}
      testID={testID}
      disabled={!onPress}
      onPress={onPress}
      style={[
        ratingCardStyles.container,
        {padding: image ? 0 : 10, bottom, width, backgroundColor},
      ]}>
      {image && <Image style={{height: 75, width: 75}} source={image} />}
      <View style={ratingCardStyles.information}>
        <Text style={[ratingCardStyles.title, {color: textColor}]}>
          {title}
        </Text>
        {description && (
          <Text style={[ratingCardStyles.decription, {color: textColor}]}>
            {description}
          </Text>
        )}
        <View style={ratingCardStyles.rating}>
          {renderIcon(icon, {size: 16, color: iconColor})}
          {rating !== undefined && (
            <Text style={{color: textColor}}>
              {Number(rating).toFixed(decimals)}
            </Text>
          )}
        </View>
      </View>
    </Pressable>
  );
};