import React from 'react';

import Colors from '../Colors';
import { useBluetoothContext } from '../../bluetooth/useBluetoothContext';
import styles, { BATTERY_ICON_WIDTH, BATTERY_ICON_HEIGHT } from './styles';
import CurrentBatteryIconForBadge from './components/CurrentBatteryIconForBadge';
import { isLow } from '../ProbeBattery/utils';
import { View } from 'react-native';
import { Label } from '@widergy/mobile-ui';

interface Props {
  lowBattery: number;
}

const BadgeCurrentBatteryIcon = ({ lowBattery }: Props) => {
  const bluetoothContext = useBluetoothContext();
  const isLowBattery = isLow(bluetoothContext.batteryPercentage, lowBattery);
  if (bluetoothContext.batteryPercentage != null) {
    return (
      <View style={styles.container}>
        <CurrentBatteryIconForBadge
          width={BATTERY_ICON_WIDTH}
          height={BATTERY_ICON_HEIGHT}
          color={isLowBattery ? Colors.error03 : Colors.success03}
          percentage={bluetoothContext.batteryPercentage}
        />
        <Label style={styles.label} color={Colors.dark01} semiBold>
          {`${bluetoothContext.batteryPercentage}%`}
        </Label>
      </View>
    );
  } else return null;
};

export default BadgeCurrentBatteryIcon;