# TravelBooking

The `TravelBooking` component is a comprehensive travel booking solution that provides interfaces for flights, hotels, and car rentals. It offers customizable forms with search functionality, suggestions, date selection, and detailed summary options. The component is fully RTL-compatible and includes various styling options for seamless integration into any application design.

![TravelBooking Flight Example](../../assets/components/TravelBooking-1.png)
![TravelBooking Hotel Example](../../assets/components/TravelBooking-2.png)

## Usage

```tsx
import { TravelBooking } from "@/components/TravelBooking";
import { useTheme } from "../../theme";

const MyBookingScreen = () => {
  const { theme } = useTheme();
  
  const handleSearch = (details) => {
    console.log("Search details:", details);
    // Handle search logic
  };
  
  const handleTabChange = (tab) => {
    console.log("Selected tab:", tab);
    // Handle tab change logic
  };

  return (
    <TravelBooking
      tabs={["Flights", "Hotels", "Car Rentals"]}
      initialTab="Flights"
      onTabChange={handleTabChange}
      onSearch={handleSearch}
      flightFormProps={{
        fromLabel: "FROM",
        toLabel: "TO",
        departureLabel: "DEPARTURE",
        returnLabel: "RETURN"
      }}
      hotelFormProps={{
        destinationLabel: "DESTINATION",
        checkinLabel: "CHECK-IN",
        checkoutLabel: "CHECK-OUT"
      }}
      searchButtonStyle={{ backgroundColor: theme.primary }}
      labelStyle={{ color: theme.labelText }}
    />
  );
};
```

## Core Components

The TravelBooking component integrates several specialized components:

### TabSelector
Allows users to switch between different booking types (flights, hotels, car rentals).

### FlightForm
A complete form for flight bookings with location inputs, date selection, and search functionality.

### HotelForm
A form for hotel bookings with destination input, date selection, and nationality picker.

### CarRentalForm
A form for car rentals with location inputs, date selection, and driver age selection.

### SummaryBar
A collapsible bar that displays booking summaries and allows for additional configuration.

### FlightSummary
Displays and manages flight details including passenger counts and class selection.

### HotelSummary
Displays and manages hotel booking details including room and guest configurations.

## TravelBooking Props

### Core Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tabs` | `string[]` | `["Flights", "Hotels", "Car Rentals"]` | Array of tab names to display |
| `initialTab` | `string` | First tab in the `tabs` array | The initially selected tab |
| `onTabChange` | `(tab: string) => void` | `undefined` | Callback when the selected tab changes |
| `onSearch` | `(details: any) => void` | `undefined` | Callback when the search button is pressed |
| `onInputFocus` | `(input: FormInputType) => void` | `undefined` | Callback when any form input gains focus |
| `onTextChange` | `(text: string) => void` | `undefined` | Callback when text changes in location inputs |

### Selection Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `initialFlightSelection` | `FlightSelection` | `undefined` | Initial selection state for flight options |
| `initialHotelSelection` | `RoomState[]` | `undefined` | Initial selection state for hotel options |
| `onSummarySelectionChange` | `(selection: SelectionCallbackDataType) => void` | `undefined` | Callback when selection changes |

### Suggestion Data Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `flightSuggestionData` | `FlightSuggestions[]` | Default mock data | Suggestion data for flight locations |
| `hotelSuggestionData` | `HotelSuggestions[]` | Default mock data | Suggestion data for hotel destinations |
| `carSuggestionData` | `CarSuggestions[]` | Default mock data | Suggestion data for car rental locations |

### Style Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `formContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the root container of each form |
| `labelStyle` | `StyleProp<TextStyle>` | `undefined` | Style for input labels |
| `inputStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the CustomInput's TextInput component |
| `inputTouchableStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the touchable wrapper around date displays |
| `inputTextStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the text inside inputs or date displays |
| `dateSearchRowStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container holding date picker(s) and search button |
| `dateInputGroupStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for individual date display groups |
| `searchButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the search button |
| `searchIconStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the search icon |
| `calendarThemeOverrides` | `object` | `{}` | Theme overrides for the calendar component |
| `calendarContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container wrapping the calendar |
| `swapButtonContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container wrapping the swap button |
| `swapButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the swap button itself |
| `swapIconStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the swap icon |
| `inputGroupContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container wrapping input fields |

### Child Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tabSelectorProps` | `Partial<TabSelectorProps>` | `undefined` | Props to pass to the TabSelector component |
| `summaryBarProps` | `Partial<SummaryBarProps>` | `undefined` | Props to pass to the SummaryBar component |
| `flightSummaryProps` | `Partial<FlightSummaryProps>` | `undefined` | Props to pass to the FlightSummary component |
| `hotelSummaryProps` | `Partial<HotelSummaryProps>` | `undefined` | Props to pass to the HotelSummary component |
| `flightFormProps` | `Partial<FlightFormProps>` | `undefined` | Props to pass to the FlightForm component |
| `hotelFormProps` | `Partial<HotelFormProps>` | `undefined` | Props to pass to the HotelForm component |
| `carRentalFormProps` | `Partial<CarRentalFormProps>` | `undefined` | Props to pass to the CarRentalForm component |

## FlightForm Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `initialFromLocation` | `string` | `"Beirut, Beirut Intl Arpt - BEY"` | Initial from location |
| `initialToLocation` | `string` | `"Dubai, Dubai Intl Arpt - DXB"` | Initial to location |
| `initialDepartureDate` | `string` | `undefined` | Initial departure date (YYYY-MM-DD) |
| `initialReturnDate` | `string` | `undefined` | Initial return date (YYYY-MM-DD) |
| `fromLabel` | `string` | `"FROM"` | Label for the from location input |
| `toLabel` | `string` | `"TO"` | Label for the to location input |
| `departureLabel` | `string` | `"DEPARTURE"` | Label for the departure date picker |
| `returnLabel` | `string` | `"RETURN"` | Label for the return date picker |
| `isOneWay` | `boolean` | `undefined` | If true, only departure date is required |
| `suggestionData` | `FlightSuggestions[]` | `undefined` | Suggestion data for locations |

## HotelForm Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `initialDestination` | `string` | `undefined` | Initial destination |
| `initialCheckinDate` | `string` | `undefined` | Initial check-in date (YYYY-MM-DD) |
| `initialCheckoutDate` | `string` | `undefined` | Initial check-out date (YYYY-MM-DD) |
| `initialNationality` | `string` | `undefined` | Initial nationality selection |
| `destinationLabel` | `string` | `"DESTINATION"` | Label for the destination input |
| `checkinLabel` | `string` | `"CHECK-IN"` | Label for the check-in date picker |
| `checkoutLabel` | `string` | `"CHECK-OUT"` | Label for the check-out date picker |
| `nationalityLabel` | `string` | `"NATIONALITY"` | Label for the nationality picker |
| `suggestionData` | `HotelSuggestions[]` | `undefined` | Suggestion data for destinations |
| `nationalityData` | `{ label: string; value: string }[]` | Default nationalities | Data for nationality picker |

## CarRentalForm Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `initialFromLocation` | `string` | `undefined` | Initial pick-up location |
| `initialToLocation` | `string` | `undefined` | Initial drop-off location |
| `initialPickupDate` | `string` | `undefined` | Initial pick-up date (YYYY-MM-DD) |
| `initialDropoffDate` | `string` | `undefined` | Initial drop-off date (YYYY-MM-DD) |
| `fromLabel` | `string` | `"PICK-UP"` | Label for the pick-up location input |
| `toLabel` | `string` | `"DROP-OFF"` | Label for the drop-off location input |
| `pickupLabel` | `string` | `"PICK-UP DATE"` | Label for the pick-up date picker |
| `dropoffLabel` | `string` | `"DROP-OFF DATE"` | Label for the drop-off date picker |
| `isOneWay` | `boolean` | `undefined` | If true, drop-off location can differ from pick-up |
| `suggestionData` | `CarSuggestions[]` | `undefined` | Suggestion data for locations |

## SummaryBar Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `containerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container |
| `summaryTextStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the summary text |
| `iconStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the icon |
| `onSelectionChange` | `(selection: SelectionCallbackDataType) => void` | `undefined` | Callback when selection changes |
| `mode` | `"flight" \| "hotel"` | Required | The mode of the summary bar |
| `flightProps` | `FlightSummaryProps` | `undefined` | Props for the FlightSummary component |
| `hotelProps` | `HotelSummaryProps` | `undefined` | Props for the HotelSummary component |

## Type Definitions

### FormInputType
```typescript
enum FormInputType {
  FLIGHT_FROM = "flightFrom",
  FLIGHT_TO = "flightTo",
  HOTEL_DEST = "hotelDest",
  CAR_PICKUP = "carPickup",
  CAR_DROP_OFF = "carDropoff",
}
```

### FlightSuggestions
```typescript
interface FlightSuggestions {
  id: string | number;
  city: string;
  value: string;
  airports: string[];
}
```

### HotelSuggestions
```typescript
interface HotelSuggestions {
  id: string | number;
  city: string;
  country: string;
  value: string;
}
```

### CarSuggestions
```typescript
interface CarSuggestions {
  id: string | number;
  city: string;
  country: string;
  value: string;
}
```

### FlightSelection
```typescript
interface FlightSelection {
  flightType: string;
  flightClass: string;
  passengers: Record<string, number>;
}
```

### RoomState
```typescript
interface RoomState {
  id: string;
  [key: string]: any; // Typically includes adults, children counts
}
```

## Advanced Usage

### Complete Example with Customization

```tsx
import { TravelBooking } from "@/components/TravelBooking";
import { useTheme } from "../../theme";
import { Ionicons } from "@expo/vector-icons";
import { useState } from "react";

const AdvancedBookingScreen = () => {
  const { theme, isRTL } = useTheme();
  const [currentTab, setCurrentTab] = useState("Flights");
  
  // Custom flight suggestions
  const customFlightSuggestions = [
    {
      id: 1,
      city: "Paris",
      value: "Paris, France",
      airports: ["Charles de Gaulle (CDG)", "Orly (ORY)"]
    },
    {
      id: 2,
      city: "Tokyo",
      value: "Tokyo, Japan",
      airports: ["Narita (NRT)", "Haneda (HND)"]
    }
  ];

  // Handle search submission
  const handleSearch = (details) => {
    if (currentTab === "Flights") {
      // Process flight search
      const { from, to, departure, return: returnDate } = details;
      console.log("Flight search:", { from, to, departure, returnDate });
    } else if (currentTab === "Hotels") {
      // Process hotel search
      const { destination, checkin, checkout, nationality } = details;
      console.log("Hotel search:", { destination, checkin, checkout, nationality });
    } else if (currentTab === "Car Rentals") {
      // Process car rental search
      const { from, to, pickup, dropoff, driverAge } = details;
      console.log("Car rental search:", { from, to, pickup, dropoff, driverAge });
    }
  };

  return (
    <TravelBooking
      tabs={["Flights", "Hotels", "Car Rentals"]}
      initialTab={currentTab}
      onTabChange={setCurrentTab}
      onSearch={handleSearch}
      onInputFocus={(input) => console.log("Focus on:", input)}
      
      // Custom flight form configuration
      flightFormProps={{
        fromLabel: "DEPARTURE CITY",
        toLabel: "ARRIVAL CITY",
        departureLabel: "OUTBOUND",
        returnLabel: "INBOUND",
        swapIconName: "repeat"
      }}
      
      // Custom hotel form configuration
      hotelFormProps={{
        destinationPlaceholder: "Where are you going?",
        nationalityData: [
          { label: "Select Country", value: undefined },
          { label: "United States", value: "US" },
          { label: "Japan", value: "JP" }
        ]
      }}
      
      // Custom styling
      labelStyle={{ 
        color: theme.primary, 
        fontWeight: "bold", 
        textTransform: "uppercase" 
      }}
      searchButtonStyle={{ 
        backgroundColor: theme.accent,
        borderRadius: 25
      }}
      searchIconStyle={{ color: "white" }}
      
      // Custom data
      flightSuggestionData={customFlightSuggestions}
      
      // Flight summary customization
      flightSummaryProps={{
        flightTypesData: ["Round trip", "One way", "Multi-city"],
        flightClassesData: ["Economy", "Premium Economy", "Business", "First"]
      }}
      
      // RTL support
      tabSelectorProps={{
        tabTextStyle: { textAlign: isRTL ? "right" : "left" }
      }}
    />
  );
};
```

### Using the Summary Bar

The SummaryBar component allows users to view and modify their selections without having to interact with the main form. It's especially useful for complex bookings.

```tsx
import { SummaryBar } from "@/components/TravelBooking";
import { useTheme } from "../../theme";

const SummaryBarExample = () => {
  const { theme } = useTheme();
  
  const handleSelectionChange = (selection) => {
    console.log("Selection updated:", selection);
  };
  
  // Example for Flight Summary
  return (
    <SummaryBar
      mode="flight"
      onSelectionChange={handleSelectionChange}
      containerStyle={{ 
        borderRadius: 8,
        marginBottom: 16
      }}
      summaryTextStyle={{ 
        color: theme.onSurface,
        fontWeight: "500"
      }}
      flightProps={{
        passengersData: [
          {
            key: "adults",
            name: "Adults",
            description: "12+ years",
            defaultValue: 2,
            minValue: 1,
            maxValue: 9
          },
          {
            key: "children",
            name: "Children",
            description: "2-11 years",
            defaultValue: 0,
            minValue: 0,
            maxValue: 6
          }
        ],
        selection: {
          flightType: "Round trip",
          flightClass: "Economy",
          passengers: { adults: 2, children: 0, infants: 0 }
        }
      }}
    />
  );
};
```

## Related Components

- `DateRangePicker`: Used for selecting date ranges in travel forms
- `CustomInput`: Used for text input fields throughout the forms
- `NumericStepper`: Used for incrementing/decrementing passenger and room counts
- `SuggestionList`: Used for displaying location suggestions