import React from 'react';
import { ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import * as Animatable from 'react-native-animatable';

import { LightbulbIcon, ChevronRightIcon, FlexRow, IconButton, WifiIcon } from '../../widgets';
import { LIGHT_GREY, SUSSOL_ORANGE, WHITE, DARKER_GREY } from '../../globalStyles';
import { TextWithIcon } from '../../widgets/Typography';
import { vaccineStrings } from '../../localization';
import { WithFixedDimensions } from '../../widgets/WithFixedDimensions';
import { Spacer } from '../../widgets/Spacer';

import { NewSensorActions } from '../../actions';
import { WizardActions } from '../../actions/WizardActions';
import { BlinkActions } from '../../actions/Bluetooth/BlinkActions';
import { selectSendingBlinkTo } from '../../selectors/Bluetooth/bluetooth';

export const RectangleButton = ({ isDisabled, onPress, isSpinning }) =>
  isSpinning ? (
    <ActivityIndicator style={{ width: 100, height: 30 }} color={SUSSOL_ORANGE} size="small" />
  ) : (
    <IconButton
      isDisabled={isDisabled}
      onPress={onPress}
      rectangle
      Icon={<LightbulbIcon />}
      label={vaccineStrings.blink}
      labelStyle={localStyles.rectangleButtonLabel}
      containerStyle={
        isDisabled
          ? { ...localStyles.rectangleButtonContainer, backgroundColor: LIGHT_GREY }
          : localStyles.rectangleButtonContainer
      }
    />
  );

RectangleButton.propTypes = {
  isDisabled: PropTypes.bool.isRequired,
  onPress: PropTypes.func.isRequired,
  isSpinning: PropTypes.bool.isRequired,
};

export const ScanRowComponent = ({ macAddress, blink, isBlinking, isDisabled, selectSensor }) => (
  <Animatable.View animation="fadeIn" duration={1000} useNativeDriver>
    <WithFixedDimensions height={60}>
      <FlexRow flex={0} alignItems="center" justifyContent="flex-end">
        <RectangleButton
          isSpinning={isBlinking}
          isDisabled={isDisabled}
          onPress={() => blink(macAddress)}
        />
        <Spacer space={20} />
        <TextWithIcon left size="ms" Icon={<WifiIcon />}>
          {macAddress}
        </TextWithIcon>

        <IconButton
          onPress={() => selectSensor(macAddress)}
          right
          labelStyle={localStyles.connectText}
          label={vaccineStrings.connect}
          size="ms"
          Icon={<ChevronRightIcon color={DARKER_GREY} />}
        />
      </FlexRow>
    </WithFixedDimensions>
  </Animatable.View>
);

const dispatchToProps = dispatch => {
  const blink = macAddress => dispatch(BlinkActions.startSensorBlink(macAddress));
  const selectSensor = macAddress => {
    dispatch(NewSensorActions.select(macAddress));
    dispatch(WizardActions.nextTab());
  };

  return { blink, selectSensor };
};

const stateToProps = (state, ownProps) => {
  const { macAddress } = ownProps;
  const currentlyBlinking = selectSendingBlinkTo(state);
  // This is the sensor which is being blinked at the moment
  const isBlinking = macAddress === currentlyBlinking;
  // This is not the sensor being blinked, but some other sensor is,
  // so disabled this one.
  const isDisabled = !!currentlyBlinking && !isBlinking;
  return { isDisabled, isBlinking };
};

export const ScanRow = connect(stateToProps, dispatchToProps)(ScanRowComponent);

const localStyles = {
  connectText: { fontSize: 14, color: DARKER_GREY, marginRight: 20, textTransform: 'capitalize' },
  rectangleButtonLabel: { color: WHITE, textTransform: 'uppercase' },
  rectangleButtonContainer: {
    width: 100,
    height: 30,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: SUSSOL_ORANGE,
  },
};

ScanRowComponent.propTypes = {
  selectSensor: PropTypes.func.isRequired,
  isBlinking: PropTypes.bool.isRequired,
  isDisabled: PropTypes.bool.isRequired,
  macAddress: PropTypes.string.isRequired,
  blink: PropTypes.func.isRequired,
};

@@ -109,16 +109,74 @@
 redux';%0A
+import %7B useNavigation %7D from '@react-navigation/native';%0A
 import P
@@ -1772,18 +1772,69 @@
 r %7D) =%3E 
-(%0A
+%7B%0A  const navigation = useNavigation();%0A  return (%0A  
   %3CAnima
@@ -1900,16 +1900,18 @@
 er%3E%0A    
+ 
+ 
 %3CWithFix
@@ -1936,16 +1936,18 @@
 t=%7B60%7D%3E%0A
+  
       %3CF
@@ -2017,16 +2017,18 @@
         
+  
 %3CRectang
@@ -2032,24 +2032,26 @@
 angleButton%0A
+  
           is
@@ -2074,32 +2074,34 @@
 king%7D%0A          
+  
 isDisabled=%7BisDi
@@ -2104,24 +2104,26 @@
 isDisabled%7D%0A
+  
           on
@@ -2158,27 +2158,31 @@
 s)%7D%0A        
+  
 /%3E%0A
+  
         %3CSpa
@@ -2207,16 +2207,18 @@
         
+  
 %3CTextWit
@@ -2269,16 +2269,18 @@
         
+  
 %7BmacAddr
@@ -2280,24 +2280,26 @@
 macAddress%7D%0A
+  
         %3C/Te
@@ -2315,24 +2315,26 @@
 n%3E%0A%0A        
+ 
+ 
 %3CIconButton%0A
@@ -2329,24 +2329,26 @@
 %3CIconButton%0A
+  
           on
@@ -2359,16 +2359,134 @@
 s=%7B() =%3E
+ %7B%0A              // Navigating to the next tab whose name is '1'%0A              navigation.navigate('1');%0A             
  selectS
@@ -2494,34 +2494,51 @@
 nsor(macAddress)
-%7D%0A
+;%0A            %7D%7D%0A  
           right%0A
@@ -2543,24 +2543,26 @@
 t%0A          
+  
 labelStyle=%7B
@@ -2586,16 +2586,18 @@
 ctText%7D%0A
+  
         
@@ -2639,16 +2639,18 @@
         
+  
 size=%22ms
@@ -2657,24 +2657,26 @@
 %22%0A          
+ 
+ 
 Icon=%7B%3CChevr
@@ -2715,27 +2715,31 @@
 /%3E%7D%0A        
+  
 /%3E%0A
+  
       %3C/Flex
@@ -2743,16 +2743,18 @@
 lexRow%3E%0A
+  
     %3C/Wi
@@ -2772,16 +2772,18 @@
 nsions%3E%0A
+  
   %3C/Anim
@@ -2795,17 +2795,22 @@
 e.View%3E%0A
-)
+  );%0A%7D
 ;%0A%0Aconst

Add calling of navigate on navigator ref