import React from 'react';
import { Label } from '@widergy/mobile-ui';
import { Dimensions, Image, View } from 'react-native';
import styles from './styles';
import { PROBE_MODEL } from './constants';
import ProbeDeviceImage from '../assets/dashboard/probeDevice.png';
import Colors from '../Colors';

interface BadgeTranslation {
  statusBadge: string;
  statusBadgeDisconnected: string;
}

interface Props {
  translations: BadgeTranslation;
  deviceSerial: string;
  connected: boolean;
  deviceIcon?: number;
}

const ProbeDevice = ({ translations, deviceSerial, connected, deviceIcon }: Props) => {
  const renderBadge = () => {
    return connected ? (
      <Label mediumBold color={Colors.success05} style={styles.connectedBadge}>
        {translations.statusBadge}
      </Label>
    ) : (
      <Label mediumBold color={Colors.gray02} style={styles.disconnectedBadge}>
        {translations.statusBadgeDisconnected}
      </Label>
    );
  };
  const windowHeight = Dimensions.get('window').height;
  const isDeviceSmall = windowHeight < 593;

  return (
    <View style={[styles.container, isDeviceSmall && styles.isDeviceSmall]}>
      <View style={styles.infoBox}>
        <Label mediumBold style={styles.probeModel}>
          {PROBE_MODEL}
        </Label>
        {renderBadge()}
      </View>
      <Label big color={Colors.gray02}>
        {deviceSerial}
      </Label>
      {!isDeviceSmall && (
        <Image
          source={deviceIcon ?? ProbeDeviceImage}
          style={[styles.deviceImage, !connected && styles.opacity]}
          resizeMode="contain"
        />
      )}
    </View>
  );
};

export default ProbeDevice;