import React from 'react';
import { Label } from '@widergy/mobile-ui';
import { Image, View } from 'react-native';
import styles, { BATTERY_ICON_WIDTH, BATTERY_ICON_HEIGHT } from './styles';
import { useBluetoothContext } from '@widergy/sfp-mobile-toolbox';
import BadgeRed from '../assets/ProbeBattery/badge.png';
import UnavailableBattery from '../assets/ProbeBattery/unavailableBattery.png';
import CurrentBatteryIcon from '../CurrentBatteryIcon';
import Badge from '../Badge';
import Colors from '../Colors';
import { isLow } from './utils';

interface Translations {
  title: string;
  availableLabel: string;
  unavailableBatteryText: string;
  lowBatteryText: string;
}

interface Props {
  translations: Translations;
  lowBattery: number;
  BatteryIcon?: Function;
  UnavailableBatteryIcon?: number;
}

const ProbeBattery = ({ translations, lowBattery, BatteryIcon, UnavailableBatteryIcon }: Props) => {
  const bluetoothContext = useBluetoothContext();
  const isLowBattery = isLow(bluetoothContext.batteryPercentage, lowBattery);
  const FinalBatteryIcon = BatteryIcon ?? CurrentBatteryIcon;
  return (
    <View style={styles.container}>
      <View style={styles.batteryBoxTop}>
        <View style={styles.title}>
          <Label big mediumBold>
            {translations.title}
          </Label>
          {isLowBattery && <Image source={BadgeRed} style={styles.badgeRed} resizeMode="contain" />}
        </View>
        {(!bluetoothContext.batteryPercentage || isLowBattery) && (
          <Badge
            label={!isLowBattery ? translations.unavailableBatteryText : translations.lowBatteryText}
            backgroundColor={!isLowBattery ? Colors.light02 : Colors.error01}
            color={!isLowBattery ? Colors.gray02 : Colors.error05}
          />
        )}
      </View>
      <View style={styles.batteryContainer}>
        {bluetoothContext.batteryPercentage != null ? (
          <FinalBatteryIcon
            width={BATTERY_ICON_WIDTH}
            height={BATTERY_ICON_HEIGHT}
            color={isLowBattery ? Colors.error03 : Colors.success03}
            percentage={bluetoothContext.batteryPercentage}
          />
        ) : (
          <Image
            source={UnavailableBatteryIcon ?? UnavailableBattery}
            style={styles.unavailableBattery}
            resizeMode="contain"
          />
        )}
        {bluetoothContext.batteryPercentage != null && (
          <View>
            <Label
              mediumBold
              style={styles.textBattery}
              right
            >{`${bluetoothContext.batteryPercentage}%`}</Label>
            <Label color={Colors.gray02} right>
              {translations.availableLabel}
            </Label>
          </View>
        )}
      </View>
    </View>
  );
};

export default ProbeBattery;