Untitled

const BottomSheetContent = ({
  currentFloor,
  destinationFloor,
  lifts,
  buildingFloors,
}: BottomSheetContentProps) => {
  const { t, i18n } = useTranslation('HomeTranslation');
  const translations = useSelector(LiftsSelectors.selectTranslations);
  const currentLanguage = i18n.language || 'en-US';

  const [currentFloorSelection, setCurrentFloorSelection] = useState(
    currentFloor ?? 'G'
  );
  const [destFloorSelection, setDestFloorSelection] = useState(
    destinationFloor ?? 'G'
  );

  const { widthConstCal } = useDesignDimensions();

  const styles = StyleSheet.create({
    handleIndicator: {
      width: widthConstCal(139),
    },
    sheetContainer: {
      paddingVertical: widthConstCal(15),
      paddingHorizontal: widthConstCal(40),
      borderRadius: widthConstCal(16),
    },
    sheetTitleWrap: {
      marginBottom: widthConstCal(14),
      alignItems: 'center',
    },
    sheetTitle: {
      fontFamily: FontFamily.pageName26,
      fontSize: widthConstCal(FontSizeNormal.pageName26),
      color: color.Retro_Black,
    },
    contentWrap: {
      height: widthConstCal(750),
    },
    liftsContainer: {
      borderWidth: widthConstCal(1),
      borderColor: color.T50,
      borderRadius: widthConstCal(12),
      marginBottom: widthConstCal(30),
    },
    liftRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingHorizontal: widthConstCal(20),
      paddingVertical: widthConstCal(16),
      borderTopLeftRadius: widthConstCal(12),
      borderTopRightRadius: widthConstCal(12),
      gap: widthConstCal(10),
    },
    liftIdText: {
      fontFamily: FontFamily.h2Bold22,
      fontSize: widthConstCal(FontSizeNormal.h2Bold22),
      color: color.Retro_Black,
    },
    liftStatusText: {
      fontFamily: FontFamily.bodyR16,
      fontSize: widthConstCal(FontSizeNormal.bodyR16),
    },
    liftBadge: {
      backgroundColor: '#F1F6F7',
      borderRadius: widthConstCal(12),
      paddingVertical: widthConstCal(12),
      paddingHorizontal: widthConstCal(16),
      alignItems: 'center',
      justifyContent: 'center',
      width: widthConstCal(127),
      flexDirection: 'row',
      // gap: widthConstCal(10),
    },
    liftText: {
      fontFamily: FontFamily.displayM36,
      fontSize: widthConstCal(FontSizeNormal.displayM36),
    },
    arrowsWrap: {
      marginRight: widthConstCal(12),
      flex: 1
    },
    sectionLabelRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingBottom: widthConstCal(8),
      marginTop: widthConstCal(0),
    },
    sectionLabelRowSpaced: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingBottom: widthConstCal(8),
      marginTop: widthConstCal(25),
    },
    sectionLabel: {
      fontFamily: FontFamily.subtitle18,
      fontSize: widthConstCal(FontSizeNormal.subtitle18),
      color: color.Retro_Black,
    },
    sectionSubLabel: {
      fontFamily: FontFamily.subtitle18,
      fontSize: widthConstCal(FontSizeNormal.subtitle18),
      color: color.T100,
    },
    dropdownContainer: {
      backgroundColor: color.WHITE,
      borderRadius: widthConstCal(12),
      elevation: 2,
      borderRightColor: '#00000040',
      borderLeftColor: '#00000040',
      borderBottomColor: '#00000040',
      borderRightWidth: widthConstCal(2),
      borderLeftWidth: widthConstCal(2),
      borderBottomWidth: widthConstCal(3),
    },
    dropdown: {
      alignItems: 'center',
      borderColor: color.Blue,
      paddingHorizontal: widthConstCal(40),
      borderWidth: widthConstCal(2),
      borderRadius: widthConstCal(12),
      paddingVertical: widthConstCal(10),
    },
    dropdownItemContainer: {
      paddingHorizontal: widthConstCal(40),
      paddingVertical: widthConstCal(20),
    },
    callButton: {
      backgroundColor: color.Green,
      marginTop: widthConstCal(50),
      paddingVertical: widthConstCal(14),
      marginBottom: widthConstCal(55),
      alignItems: 'center',
      borderRadius: widthConstCal(1000),
    },
    callButtonText: {
      fontFamily: FontFamily.cTAButtonBold20,
      fontSize: widthConstCal(FontSizeNormal.cTAButtonBold20),
      color: color.WHITE,
    },
  });

  const [notificationState, setNotificationState] = useState<{
    show: boolean;
    type: 'success' | 'error' | null;
  }>({ show: false, type: null });

  const notificationStyles = StyleSheet.create({
    notificationContainer: {
      borderRadius: widthConstCal(8),
      paddingVertical: widthConstCal(24),
      marginBottom: widthConstCal(16),
      alignItems: 'center',
      justifyContent: 'center',
    },
    notificationText: {
      fontFamily: FontFamily.subtitle18,
      fontSize: widthConstCal(FontSizeNormal.subtitle18),
      color: notificationState.type === 'success' ? color.Blue : color.C1,
    },
    notificationSuccess: {
      backgroundColor: color.Hover_Button_Blue,
    },
    notificationError: {
      backgroundColor: color.T50,
      color: color.C1,
    },
  });

  const renderItem = useCallback(
    (item: any) => <Text style={styles.liftText}>{item.name}</Text>,
    [styles.liftText]
  );

  const dispatch = useDispatch<ThunkDispatch<any, undefined, UnknownAction>>();
  const currentBuilding = useSelector(LiftsSelectors.selectCurrentBuildig);

  // Function to show notification
  const showNotification = (type: 'success' | 'error') => {
    setNotificationState({ show: true, type });
    setTimeout(() => {
      setNotificationState({ show: false, type: null });
    }, 3000);
  };

  const onElevatorCallPress = () => {
    showNotification('success');
  };

  const liftsToShow = useMemo(() => lifts.slice(0, 2), [lifts]);
  const isCallDisabled = lifts.length < 1;

  return (
    <BottomSheetScrollView style={styles.sheetContainer} nestedScrollEnabled>
      <View style={styles.sheetTitleWrap}>
        <Text style={styles.sheetTitle}>{t('bottomSheet_Elevator_title')}</Text>
      </View>

      {notificationState.show && notificationState.type && (
        <Animated.View
          entering={FadeIn.duration(500)}
          exiting={FadeOut.duration(500)}
          style={[
            notificationStyles.notificationContainer,
            notificationState.type === 'success'
              ? notificationStyles.notificationSuccess
              : notificationStyles.notificationError,
          ]}>
          <Text style={notificationStyles.notificationText}>
            {notificationState.type === 'success' ? 'You have successfully called the elevator.' : 'Unable to call the elevator. Please try again.'}
          </Text>
        </Animated.View>
      )}

      <Animated.View style={styles.contentWrap}>
        <View style={styles.liftsContainer}>
          {liftsToShow.map((lift) => {
            const key = lift?.liftId ?? `lift-${lift?.translationKey}`;
            const direction = getLiftDirectionStatus(lift); // 'Up' | 'Down' | null
            const isWorking = isLiftWorking(lift);
            const isOff = isLiftOff(lift);

            const statusText = isOff
              ? t('text_NotAvailable')
              : direction === null && isWorking
                ? t('elevator_status') // 'Available'
                : direction === 'up'
                  ? t('text_GoingUp')
                  : t('text_GoingDown');

            const statusColor = direction
              ? color.Blue
              : isOff
                ? color.Red
                : direction === null && isWorking
                  ? color.Green
                  : color.T100;

            return (
              <View style={styles.liftRow} key={key}>
                <View style={{ flex: 1 }}>
                  <Text style={styles.liftIdText}>
                    {lift?.liftId ?? 'Elevator --'}
                  </Text>
                  <Text style={[styles.liftStatusText, { color: statusColor }]}>
                    {statusText}
                  </Text>
                </View>

                <View style={styles.liftBadge}>
                  <View style={styles.arrowsWrap}>
                    <FontAwesomeIcon
                      icon={kitIcon.faLiftArrowUp}
                      size={widthConstCal(20)}
                      color={
                        direction === null
                          ? color.T50
                          : direction?.toLowerCase() === 'up'
                            ? color.Blue
                            : color.Retro_Black
                      }
                    />
                    <FontAwesomeIcon
                      icon={kitIcon.faLiftArrowDown}
                      size={widthConstCal(20)}
                      color={
                        direction === null
                          ? color.T50
                          : direction?.toLowerCase() === 'down'
                            ? color.Blue
                            : color.Retro_Black
                      }
                    />
                  </View>
                  <Text
                    style={[
                      styles.liftText,
                      { color: isOff ? color.T100 : color.Retro_Black,
                        flex: 2
                      },
                    ]}
                  >
                    {/* {getLiftStatus(lift, 'Current')} */}
                  </Text>
                </View>
              </View>
            );
          })}
        </View>

        <View style={styles.sectionLabelRow}>
          <Text style={styles.sectionLabel}>{t('text_CrrentFloor')} </Text>
          <Text style={styles.sectionSubLabel}>({t('text_Default')})</Text>
        </View>

        <Dropdown
          disable={lifts.length < 1}
          style={styles.dropdown}
          placeholderStyle={styles.liftText}
          selectedTextStyle={styles.liftText}
          containerStyle={styles.dropdownContainer}
          itemContainerStyle={styles.dropdownItemContainer}
          showsVerticalScrollIndicator={false}
          data={dropdownData}
          labelField="name"
          valueField="value"
          placeholder={NO_FLOOR_SELECTED}
          value={currentFloorSelection}
          onChange={(item) => setCurrentFloorSelection(item.value)}
          renderItem={renderItem}
          renderRightIcon={(visible: boolean | undefined) => (
            <FontAwesomeIcon
              icon={
                visible ?? false
                  ? kitIcon.faLiftArrowUp
                  : kitIcon.faLiftArrowDown
              }
              size={widthConstCal(23)}
              color={color.Retro_Black}
            />
          )}
        />

        <View style={styles.sectionLabelRowSpaced}>
          <Text style={styles.sectionLabel}>{t('text_DestinationFloor')} </Text>
          <Text style={styles.sectionSubLabel}>({t('text_Default')})</Text>
        </View>

        <Dropdown
          disable={lifts.length < 1}
          style={styles.dropdown}
          placeholderStyle={styles.liftText}
          selectedTextStyle={styles.liftText}
          containerStyle={styles.dropdownContainer}
          itemContainerStyle={styles.dropdownItemContainer}
          showsVerticalScrollIndicator={false}
          data={dropdownData}
          labelField="name"
          valueField="value"
          placeholder={NO_FLOOR_SELECTED}
          value={destFloorSelection}
          onChange={(item) => setDestFloorSelection(item.value)}
          renderItem={renderItem}
          renderRightIcon={(visible: boolean | undefined) => (
            <FontAwesomeIcon
              icon={
                visible ?? false
                  ? kitIcon.faLiftArrowUp
                  : kitIcon.faLiftArrowDown
              }
              size={widthConstCal(23)}
              color={color.Retro_Black}
            />
          )}
        />

        <TouchableOpacity
          disabled={isCallDisabled}
          style={styles.callButton}
          onPress={onElevatorCallPress}
        >
          <Text style={styles.callButtonText}>{t('button_CallElevator')}</Text>
        </TouchableOpacity>
      </Animated.View>
    </BottomSheetScrollView>
  );
};