import React from 'react';
import { Label } from '@widergy/mobile-ui';
import { TouchableOpacity, View } from 'react-native';
import styles from './styles';
import { useBluetoothContext } from '../../bluetooth/useBluetoothContext';
import NotificationDot from './components/NotificationDot';
import Badge from '../Badge';
import Colors from '../Colors';

interface Translations {
  title: string;
  version: Function;
  firmwareLoading: string;
  availableUpgrade: string;
  unavailableFirwareVersion: string;
  lastUpdatedAt: Function;
  retry: string;
}

interface Style {
  badge: { label: object; background: object };
}

interface Props {
  translations: Translations;
  firmwareUpgrade: boolean;
  goToFirmwareInstallation: () => {};
  updateAvailable: boolean;
  showLoadingBadge: boolean;
  mayRetry: boolean;
  firmwareTimestamp: boolean;
  style?: Style;
}

const ProbeFirmware = ({
  translations,
  firmwareUpgrade,
  goToFirmwareInstallation,
  updateAvailable,
  showLoadingBadge,
  mayRetry,
  firmwareTimestamp,
  style,
}: Props) => {
  const bluetoothContext = useBluetoothContext();

  const isTouchable = updateAvailable || mayRetry;
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.touchable} disabled={!isTouchable} onPress={goToFirmwareInstallation}>
        <View style={styles.firmwareViewTop}>
          <View style={styles.row}>
            <Label big semiBold style={styles.titleBoxColor}>
              {translations.title}
            </Label>
            {updateAvailable && <NotificationDot style={styles.dot} />}
          </View>
          {showLoadingBadge && (
            <Badge
              label={translations.firmwareLoading}
              backgroundColor={Colors.light02}
              color={Colors.gray02}
            />
          )}
          {updateAvailable && (
            <Badge
              label={translations.availableUpgrade}
              backgroundColor={style?.badge?.background ?? Colors.success01}
              color={style?.badge?.label ?? Colors.success05}
              style={styles.badge}
              labelProps={{
                style: {
                  fontSize: 10,
                },
              }}
            />
          )}
          {!bluetoothContext.version && (
            <Badge
              label={translations.unavailableFirwareVersion}
              backgroundColor={Colors.light02}
              color={Colors.gray02}
            />
          )}
        </View>
        {!!firmwareUpgrade && (
          <Label medium color={Colors.gray03}>
            {(firmwareTimestamp && firmwareUpgrade && translations.lastUpdatedAt(firmwareTimestamp)) || ''}
          </Label>
        )}
        <View style={styles.firmwareView}>
          <Label semiBold style={styles.titleBoxColor}>
            {translations.version(
              !bluetoothContext.version
                ? bluetoothContext.UNKNOWN_FIRMWARE_VERSION
                : bluetoothContext.version,
            )}
          </Label>
        </View>
        {!!mayRetry && (
          <View style={styles.cardBottom}>
            <Label>{translations.retry}</Label>
          </View>
        )}
      </TouchableOpacity>
    </View>
  );
};

export default ProbeFirmware;