<commit_before>// @flow
import * as React from 'react';
import { Image, StyleSheet, View, Text } from 'react-native';
import { StretchedImage } from '@kiwicom/react-native-app-common';
import idx from 'idx';
import GalleryButton from '../GalleryButton/GalleryButton';
import gradient from './black-to-alpha-vertical.png';
import formatRating from './formatRating';

import type { Image as GalleryGridImage } from '../../gallery/GalleryGrid';
import type { HeaderContainer_hotel } from './__generated__/HeaderContainer_hotel.graphql';

const height = 150;

const styles = StyleSheet.create({
  picture: {
    height: height,
  },
  galleryButton: {
    position: 'absolute',
    top: 10,
    right: 10,
  },
  nameAndRatingContainer: {
    height: height,
    marginTop: -height,
    alignItems: 'flex-end',
    flexDirection: 'row',
  },
  nameAndRating: {
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 10,
  },
  hotelName: {
    backgroundColor: 'transparent',
    fontSize: 18,
    fontWeight: '600',
    lineHeight: 18,
    letterSpacing: -0.45,
    color: '#ffffff',
  },
  rating: {
    backgroundColor: 'transparent',
    fontSize: 12,
    color: '#ffffff',
  },
});

export type Props = {
  hotel: HeaderContainer_hotel,
  openGallery: (hotelName: string, images: GalleryGridImage[]) => void,
};

export default class Header extends React.Component<Props> {
  openGallery = () => {
    const { hotel, openGallery } = this.props;
    const photosEdges = idx(hotel, _ => _.photos.edges) || [];
    const images = photosEdges.map(edge => ({
      key: idx(edge, _ => _.node.id) || '',
      lowRes: idx(edge, _ => _.node.lowResUrl) || '',
      highRes: idx(edge, _ => _.node.highResUrl) || '',
    }));

    if (typeof hotel.name === 'string') {
      openGallery(hotel.name, images);
    }
  };

  render = () => {
    const { hotel } = this.props;
    const mainPhotoUrl = idx(hotel, _ => _.mainPhoto.highResUrl);
    const photosCount = idx(hotel, _ => _.photos.edges.length);
    return (
      <View>
        <Image
          style={styles.picture}
          source={mainPhotoUrl ? { uri: mainPhotoUrl } : null}
        />
        <View style={styles.nameAndRatingContainer}>
          <StretchedImage source={gradient} />
          <View style={styles.nameAndRating}>
            <Text style={styles.hotelName}>{hotel.name}</Text>
            <Text style={styles.rating}>
              {formatRating(
                idx(hotel, _ => _.rating.stars),
                idx(hotel, _ => _.review.score),
                idx(hotel, _ => _.review.description),
              )}
            </Text>
          </View>
        </View>
        {photosCount && (
          <View style={styles.galleryButton}>
            <GalleryButton onClick={this.openGallery} count={photosCount} />
          </View>
        )}<commit_msg>Use NetworkImage instead of Image<commit_after>// @flow
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { NetworkImage, StretchedImage } from '@kiwicom/react-native-app-common';
import idx from 'idx';
import GalleryButton from '../GalleryButton/GalleryButton';
import gradient from './black-to-alpha-vertical.png';
import formatRating from './formatRating';

import type { Image as GalleryGridImage } from '../../gallery/GalleryGrid';
import type { HeaderContainer_hotel } from './__generated__/HeaderContainer_hotel.graphql';

const height = 150;

const styles = StyleSheet.create({
  picture: {
    height: height,
  },
  galleryButton: {
    position: 'absolute',
    top: 10,
    right: 10,
  },
  nameAndRatingContainer: {
    height: height,
    marginTop: -height,
    alignItems: 'flex-end',
    flexDirection: 'row',
  },
  nameAndRating: {
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 10,
  },
  hotelName: {
    backgroundColor: 'transparent',
    fontSize: 18,
    fontWeight: '600',
    lineHeight: 18,
    letterSpacing: -0.45,
    color: '#ffffff',
  },
  rating: {
    backgroundColor: 'transparent',
    fontSize: 12,
    color: '#ffffff',
  },
});

export type Props = {
  hotel: HeaderContainer_hotel,
  openGallery: (hotelName: string, images: GalleryGridImage[]) => void,
};

export default class Header extends React.Component<Props> {
  openGallery = () => {
    const { hotel, openGallery } = this.props;
    const photosEdges = idx(hotel, _ => _.photos.edges) || [];
    const images = photosEdges.map(edge => ({
      key: idx(edge, _ => _.node.id) || '',
      lowRes: idx(edge, _ => _.node.lowResUrl) || '',
      highRes: idx(edge, _ => _.node.highResUrl) || '',
    }));

    if (typeof hotel.name === 'string') {
      openGallery(hotel.name, images);
    }
  };

  render = () => {
    const { hotel } = this.props;
    const mainPhotoUrl = idx(hotel, _ => _.mainPhoto.highResUrl);
    const photosCount = idx(hotel, _ => _.photos.edges.length);
    return (
      <View>
        <NetworkImage
          style={styles.picture}
          source={mainPhotoUrl ? { uri: mainPhotoUrl } : null}
        />
        <View style={styles.nameAndRatingContainer}>
          <StretchedImage source={gradient} />
          <View style={styles.nameAndRating}>
            <Text style={styles.hotelName}>{hotel.name}</Text>
            <Text style={styles.rating}>
              {formatRating(
                idx(hotel, _ => _.rating.stars),
                idx(hotel, _ => _.review.score),
                idx(hotel, _ => _.review.description),
              )}
            </Text>
          </View>
        </View>
        {photosCount && (
          <View style={styles.galleryButton}>
            <GalleryButton onClick={this.openGallery} count={photosCount} />
          </View>
        )}
{'fraction_non_alphanumeric': 0.14985994397759103, 'fraction_numerical': 0.008753501400560224, 'mean_word_length': 2.6089703095388503, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 59, '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': '3737497', 'n_tokens_mistral': 1824, 'n_tokens_neox': 1733, 'n_words': 382}