// import React, { useState, useCallback, useMemo, useEffect } from "react";
// import {
//   LayoutAnimation,
//   Platform,
//   StyleSheet,
//   Text,
//   TouchableOpacity,
//   UIManager,
//   View,
//   StyleProp,
//   ViewStyle,
//   TextStyle,
//   ScrollView,
//   Dimensions,
// } from "react-native";
// import FlightSummary, {
//   FlightSelection,
//   FlightSummaryProps as FlightChildProps,
//   FlightSummaryProps,
// } from "./FlightSummary";
// import HotelSummary, {
//   RoomState,
//   HotelSummaryProps as HotelChildProps,
//   HotelSummaryProps,
// } from "./HotelSummary";
// import { ThemeType, useTheme } from "../../theme";
// import { Ionicons } from "@expo/vector-icons";

// if (
//   Platform.OS === "android" &&
//   UIManager.setLayoutAnimationEnabledExperimental
// ) {
//   UIManager.setLayoutAnimationEnabledExperimental(true);
// }

// export type SelectionCallbackDataType = FlightSelection | RoomState[];

// export type SummaryBarProps = {
//   containerStyle?: StyleProp<ViewStyle>;
//   summaryTextStyle?: StyleProp<TextStyle>;
//   iconStyle?: StyleProp<TextStyle>;
//   onSelectionChange?: (selection: SelectionCallbackDataType) => void;
//   mode: "flight" | "hotel",
//   flightProps?: FlightSummaryProps;
//   hotelProps?: HotelSummaryProps;
// };

// // export type SummaryBarProps = FlightSummaryBarProps | HotelSummaryBarProps;

// const SummaryBar: React.FC<SummaryBarProps> = ({
//   mode,
//   containerStyle,
//   summaryTextStyle,
//   iconStyle,
//   onSelectionChange,
//   // initialSelection,
//   flightProps,
//   hotelProps,
// }) => {
//   const { theme } = useTheme();
//   const styles = useMemo(() => themedStyles(theme), [theme]);

//   const [isExpanded, setIsExpanded] = useState(false);

//   const [flightSelection, setFlightSelection] =
//     useState<FlightSelection | undefined>(
//       mode === "flight" ? flightProps?.selection : undefined
//     );
//   const [hotelSelection, setHotelSelection] = useState<RoomState[] | undefined>(
//     mode === "hotel" ? hotelProps?.selection : undefined
//   );

//   useEffect(() => {
//     if (mode === "flight" && flightSelection) {
//       onSelectionChange?.(flightSelection);
//     } else if (mode === "hotel" && hotelSelection) {
//       onSelectionChange?.(hotelSelection);
//     }
//   }, []);

//   const handlePress = useCallback(() => {
//     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
//     setIsExpanded(!isExpanded);
//   }, [isExpanded]);

//   const handleInternalSelectionChange = useCallback(
//     (newSelection: FlightSelection | RoomState[]) => {
//       if (mode === "flight") {
//         if (
//           typeof newSelection === "object" &&
//           !Array.isArray(newSelection) &&
//           "flightType" in newSelection
//         ) {
//           setFlightSelection(newSelection as FlightSelection);
//           onSelectionChange?.(newSelection as FlightSelection);
//         }
//       } else if (mode === "hotel") {
//         if (Array.isArray(newSelection)) {
//           setHotelSelection(newSelection as RoomState[]);
//           onSelectionChange?.(newSelection as RoomState[]);
//         }
//       }
//     },
//     [mode, onSelectionChange]
//   );

//   const formattedSelectionText = useMemo((): string => {
//     if (mode === "flight") {
//       if (!flightSelection) return "Round trip, 1 passenger, Economy";
//       const passengersCount = Object.values(
//         flightSelection.passengers ?? {}
//       ).reduce((sum, count) => sum + count, 0);
//       const passengerText =
//         passengersCount === 1 ? "1 passenger" : `${passengersCount} passengers`;
//       return `${flightSelection.flightType}, ${passengerText}, ${flightSelection.flightClass}`;
//     } else if (mode === "hotel") {
//       if (!hotelSelection || hotelSelection.length === 0)
//         return "1 Room, 2 Guests";
//       const rooms = hotelSelection;
//       const guestConfig = hotelProps?.guestConfigData ?? undefined;
//       let totalGuests = 0;
//       if (guestConfig) {
//         totalGuests = rooms.reduce((sum, room) => {
//           let roomSum = 0;
//           guestConfig.forEach((guest) => {
//             roomSum += room[guest.key] ?? 0;
//           });
//           return sum + roomSum;
//         }, 0);
//       } else {
//         const totalAdults = rooms.reduce((sum, room) => sum + room.adults, 0);
//         const totalChildren = rooms.reduce(
//           (sum, room) => sum + room.children,
//           0
//         );
//         totalGuests = totalAdults + totalChildren;
//       }

//       const roomText = rooms.length === 1 ? "1 Room" : `${rooms.length} Rooms`;
//       const guestText =
//         totalGuests === 1 ? "1 Guest" : `${totalGuests} Guests`;
//       return `${roomText}, ${guestText}`;
//     }
//     return "Select details";
//   }, [flightSelection, hotelSelection, mode, hotelProps?.guestConfigData]);

//   return (
//     <View style={[styles.container, containerStyle]}>
//       <TouchableOpacity
//         style={[styles.summaryContainer, isExpanded && {backgroundColor: theme.surface}]}
//         onPress={handlePress}
//         activeOpacity={0.8}
//         accessibilityRole="button"
//         accessibilityState={{ expanded: isExpanded }}
//         accessibilityLabel={formattedSelectionText}
//         accessibilityHint={
//           isExpanded ? "Collapses content" : "Expands content"
//         }
//       >
//         <Text style={[styles.summaryText, summaryTextStyle]} numberOfLines={1}>
//           {formattedSelectionText}
//         </Text>
//         <Ionicons
//           name={isExpanded ? "chevron-up" : "chevron-down"}
//           size={22}
//           color={ theme.border}
//           style={iconStyle}
//         />
//       </TouchableOpacity>

//       {isExpanded && (
//         <ScrollView showsVerticalScrollIndicator={false} style={styles.contentContainer}>
//           {mode === "flight" && (
//             <FlightSummary
//               selection={flightSelection}
//               onSelectionChange={handleInternalSelectionChange}
//               {...flightProps}
//             />
//           )}
//           {mode === "hotel" && (
//             <HotelSummary
//               selection={hotelSelection}
//               onSelectionChange={handleInternalSelectionChange}
//               {...hotelProps}
//             />
//           )}
//         </ScrollView>
//       )}
//     </View>
//   );
// };

// const themedStyles = (theme: ThemeType) =>
//   StyleSheet.create({
//     container: {
//       backgroundColor: theme.surfaceVariant || theme.surface,
//       borderRadius: 8,
//       // overflow: "hidden",
//       // width: "auto",
//       alignSelf: "stretch",
//       position:"relative",
//       borderWidth: 1,
//       borderColor: theme.border,
//     },
//     summaryContainer: {
//       flexDirection: "row",
//       justifyContent: "space-between",
//       alignItems: "center",
//       paddingVertical: 14,
//       paddingHorizontal: 16,
//     },
//     summaryText: {
//       color: theme.onSurface,
//       fontSize: 15,
//       fontWeight: "500",
//       flex: 1,
//       marginRight: 10,
//     },
//     contentContainer: {
//       borderTopWidth: 1,
//       borderTopColor: theme.border,
//       width: "100%",
//       position: "absolute",
//       zIndex: 100,
//       top: 50,
//       maxHeight: 400,
//       shadowColor: "#000", // Typically black shadow
//       shadowOffset: {
//         width: 0, // Horizontal offset
//         height: 3, // Vertical offset (positive value pushes shadow down)
//       },
//       shadowOpacity: 0.15, // How visible the shadow is (0 to 1)
//       shadowRadius: 5, // How blurry the shadow is
//       // Android Shadow Property
//       elevation: 5, // Simulates shadow depth on Android (adjust value as needed)
//     },
//   });

// export default SummaryBar;