<commit_before>// @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,<commit_msg>Hotels: Add SafeAreaView to SearchResultHeader to fit on iPhone X<commit_after>// @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 { SafeAreaView } from 'react-navigation';

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

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

export default function SearchResultsHeader(props: Props) {
  return (
    <SafeAreaView style={styles.safeArea}>
      <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>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: defaultTokens.paletteWhite,
  },
  container: {
    backgroundColor: defaultTokens.paletteWhite,
    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,
{'fraction_non_alphanumeric': 0.11269383339343671, 'fraction_numerical': 0.006130544536602957, 'mean_word_length': 1.549172794117647, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5104795', 'n_tokens_mistral': 1551, 'n_tokens_neox': 1465, 'n_words': 282}