InfoCar/IncomingInstruction/index.tsx

import React, {useEffect} from 'react';
import {
  Alert,
  Text,
  useWindowDimensions,
  View,
  TouchableOpacity,
} from 'react-native';

// Redux
import {useSelector} from 'react-redux';
import {getOrientation} from '@Redux/common/selectors';
import {getUserTier} from '@Redux/auth/selectors';

// Components
import InstructionItem from './InstructionItem';

// Constants
import {MAX_WIDTH_RATIO, TIERS} from '@Constants';

// Styles
import styles from './styles';

//SVG
import {WarningIcon} from '@Svg';

const IncomingInstruction: React.FC<{
  incomingRecommendation: any;
  model: any;
}> = ({incomingRecommendation, model}) => {
  const {width: WINDOW_WIDTH, height: WINDOW_HEIGHT} = useWindowDimensions();
  const orientation = useSelector(state => getOrientation(state));

  const userTier = useSelector(state => getUserTier(state));
  const shouldHaveRecommendations = userTier === TIERS.FUEL_SAVINGS_MODE;

  const warningMessage = () => {
    Alert.alert(
      '⚠️ No Recommendations Available (for selected Consist)',
      'The selected Trip / Consist parameters do not have any recommendations available. Please contact your supervisor if you believe this is an issue.',
    );
  };

  useEffect(() => {
    if (!model) {
      warningMessage();
    }
  }, [model]);

  if (!shouldHaveRecommendations) return <></>;

  return (
    <>
      <View
        style={[
          styles.wrapOver,
          styles.container,
          {
            width:
              WINDOW_WIDTH > WINDOW_HEIGHT
                ? WINDOW_HEIGHT * MAX_WIDTH_RATIO
                : WINDOW_WIDTH * MAX_WIDTH_RATIO,
            // speed-profile: 320, env-display: 36
          },
        ]}>
        <View
          style={[
            styles.fullWidth,
            orientation === 'portrait'
              ? styles.height60
              : orientation === 'landscape'
              ? styles.height60
              : styles.height60,
            styles.whiteBg,
            styles.center,
          ]}>
          {!model ? (
            <TouchableOpacity
              style={[styles.rowItem, styles.center]}
              onPressOut={warningMessage}>
              <WarningIcon />
              <Text style={styles.titleNoRecommendation}>
                NO RECOMMENDATIONS
              </Text>
            </TouchableOpacity>
          ) : (
            <Text style={styles.title}>INCOMING RECOMMENDATIONS</Text>
          )}
        </View>
        <InstructionItem
          key={`instruction_${Math.floor(Math.random() * 1000000)}`}
          instruction={incomingRecommendation}
          index={`instruction_${Math.floor(Math.random() * 1000000)}`}
        />
      </View>
    </>
  );
};

export default IncomingInstruction;