// @flow strict

import * as React from 'react';
import { View } from 'react-native';
import { Translation, DateFormatter } from '@kiwicom/mobile-localization';
import {
  StyleSheet,
  Text,
  AdaptableBadge,
  AdaptableLayout,
} from '@kiwicom/mobile-shared';
import { defaultTokens } from '@kiwicom/mobile-orbit';

import MapHeaderButton from './MapHeaderButton';
import HotelsContext from '../../HotelsContext';

type Props = {|
  +goToMap: () => void,
|};

export default function SearchResultsHeader(props: Props) {
  return (
    <HotelsContext.Consumer>
      {({ cityName, checkin }) => {
        return (
          <View style={styles.container}>
            <View style={styles.row}>
              <View>
                <Text style={styles.text}>
                  <Translation passThrough={cityName || ''} />
                </Text>
                {checkin !== null && (
                  <AdaptableBadge
                    style={styles.badge}
                    textStyle={styles.badgeText}
                    translation={
                      <Translation
                        passThrough={DateFormatter(checkin).formatCustom({
                          weekday: 'long',
                          day: '2-digit',
                          month: 'long',
                        })}
                      />
                    }
                  />
                )}
              </View>
              {checkin !== null && (
                <AdaptableLayout
                  renderOnNarrow={
                    <MapHeaderButton
                      onPress={props.goToMap}
                      iconColor={defaultTokens.paletteInkLight}
                    />
                  }
                />
              )}
            </View>
          </View>
        );
      }}
    </HotelsContext.Consumer>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: defaultTokens.paletteWhite,
    paddingTop: 20,
    paddingStart: 16,
    android: {
      borderBottomWidth: 0,
      elevation: 2,
    },
    ios: {
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: defaultTokens.borderColorCard,
    },
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
  },
  text: {
    fontWeight: '800',
    fontSize: 16,
    color: defaultTokens.colorTextAttention,
    marginBottom: 3,
    paddingTop: 8,
  },
  badgeText: {
    fontSize: 12,
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
    marginBottom: 12,
  },
});

@@ -309,16 +309,65 @@
 -orbit';
+%0Aimport %7B SafeAreaView %7D from 'react-navigation';
 %0A%0Aimport
@@ -571,24 +571,69 @@
 %0A  return (%0A
+    %3CSafeAreaView style=%7Bstyles.safeArea%7D%3E%0A  
     %3CHotelsC
@@ -649,16 +649,18 @@
 nsumer%3E%0A
+  
       %7B(
@@ -687,16 +687,18 @@
 %7D) =%3E %7B%0A
+  
         
@@ -708,32 +708,34 @@
 urn (%0A          
+  
 %3CView style=%7Bsty
@@ -754,32 +754,34 @@
 r%7D%3E%0A            
+  
 %3CView style=%7Bsty
@@ -790,16 +790,18 @@
 s.row%7D%3E%0A
+  
         
@@ -829,16 +829,18 @@
         
+  
 %3CText st
@@ -858,16 +858,18 @@
 .text%7D%3E%0A
+  
         
@@ -939,16 +939,18 @@
         
+  
 %3C/Text%3E%0A
@@ -957,32 +957,34 @@
                 
+ 
+ 
 %7Bcheckin !== nul
@@ -982,32 +982,34 @@
 n !== null && (%0A
+  
                 
@@ -1046,16 +1046,18 @@
         
+  
 style=%7Bs
@@ -1069,16 +1069,18 @@
 .badge%7D%0A
+  
         
@@ -1140,16 +1140,18 @@
         
+  
 translat
@@ -1170,32 +1170,34 @@
                 
+  
 %3CTranslation%0A   
@@ -1193,16 +1193,18 @@
 slation%0A
+  
         
@@ -1296,16 +1296,18 @@
         
+ 
+ 
 weekday:
@@ -1307,32 +1307,34 @@
 eekday: 'long',%0A
+  
                 
@@ -1385,16 +1385,18 @@
         
+  
 month: '
@@ -1430,12 +1430,16 @@
     
+ 
+ 
 %7D)%7D%0A
+  
     
@@ -1471,34 +1471,38 @@
                 
-%7D%0A
+  %7D%0A  
                 
@@ -1514,35 +1514,39 @@
                 
+  
 )%7D%0A
+  
               %3C/
@@ -1543,32 +1543,34 @@
         %3C/View%3E%0A
+  
               %7Bc
@@ -1598,32 +1598,34 @@
                 
+ 
+ 
 %3CAdaptableLayout
@@ -1625,16 +1625,18 @@
 eLayout%0A
+  
         
@@ -1682,16 +1682,18 @@
         
+  
 %3CMapHead
@@ -1701,16 +1701,18 @@
 rButton%0A
+  
         
@@ -1771,16 +1771,18 @@
         
+  
 iconColo
@@ -1827,35 +1827,39 @@
                 
+  
 /%3E%0A
+  
                 
@@ -1870,35 +1870,39 @@
                 
+  
 /%3E%0A
+  
               )%7D
@@ -1906,32 +1906,34 @@
  )%7D%0A            
+  
 %3C/View%3E%0A        
@@ -1926,32 +1926,34 @@
 View%3E%0A          
+ 
+ 
 %3C/View%3E%0A        
@@ -1952,16 +1952,18 @@
         
+  
 );%0A     
@@ -1967,11 +1967,15 @@
     
+ 
+ 
 %7D%7D%0A
+  
     
@@ -2000,16 +2000,36 @@
 nsumer%3E%0A
+    %3C/SafeAreaView%3E%0A
   );%0A%7D%0A%0A
@@ -2065,25 +2065,24 @@
 ate(%7B%0A  
-container
+safeArea
 : %7B%0A    
@@ -2132,24 +2132,73 @@
 ,%0A  
-  paddingTop: 20
+%7D,%0A  container: %7B%0A    backgroundColor: defaultTokens.paletteWhite
 ,%0A  

Add SafeAreaView to SearchResultHeader to fit on iPhone X