import React from 'react';

import { View } from 'react-native';
import { Icon, Label } from '@widergy/mobile-ui';
import Colors from '../Colors';
import { useBluetoothContext } from '../../bluetooth/useBluetoothContext';
import { BluetoothState } from '../../bluetooth/constants';
import styles from './styles';

interface InfoBoxTranslations {
  labelBluetoothPoweredOff: string;
  labelDeviceDisconnected: string;
}

interface Props {
  translations: InfoBoxTranslations;
}

const BluetoothReminder = ({ translations }: Props) => {
  const bluetoothContext = useBluetoothContext();

  const alertType = {
    [BluetoothState.UNAVAILABLE]: () => ({
      icon: 'bluetooth',
      label: translations.labelBluetoothPoweredOff,
    }),
    [BluetoothState.IDLE]: () => {
      if (bluetoothContext.targetDevice)
        return { icon: 'access-point-off', label: translations.labelDeviceDisconnected };
      else return null;
    },
  };

  const alert = alertType[bluetoothContext.bluetoothState]?.();
  if (alert) {
    return (
      <View style={styles.infoBox}>
        <Icon
          name={alert.icon}
          color={Colors.primary04}
          size={24}
          style={styles.icon}
          type="material-community"
        />
        <Label style={styles.text}>{alert.label}</Label>
      </View>
    );
  }
  return;
};

export default BluetoothReminder;