// @flow strict

import * as React from 'react';
import { View, Platform } from 'react-native';
import Swiper from 'react-native-swiper';
import { StyleSheet, NetworkImage, Color } from '@kiwicom/mobile-shared';

import PhotosStripeHeader from './PhotosStripeHeader';

type Props = {|
  +hotelName: string,
  +imageUrls: string[],
  +index: number,
  +onClose: () => void,
|};

type State = {|
  key: number,
|};

export default class PhotosStripe extends React.Component<Props, State> {
  state = {
    key: Math.random(),
  };

  componentDidMount = () => {
    if (Platform.OS === 'android') {
      // we need to trigger a re-render on Android to show the photo
      // see: https://github.com/leecade/react-native-swiper/issues/227
      setTimeout(() =>
        this.setState({
          key: Math.random(),
        }),
      );
    }
  };

  renderPagination = (index: number, total: number) => {
    return (
      <View style={styles.paginationWrapper}>
        <PhotosStripeHeader
          photoNumber={index + 1}
          totalPhotos={total}
          hotelName={this.props.hotelName}
          onClose={this.props.onClose}
        />
      </View>
    );
  };

  render = () => (
    <Swiper
      renderPagination={this.renderPagination}
      index={this.props.index}
      key={this.state.key}
    >
      {this.props.imageUrls.map(imageUrl => (
        <View style={styles.slide} key={imageUrl}>
          <NetworkImage
            source={{ uri: imageUrl }}
            style={styles.networkImage}
            resizeMode="contain"
          />
        </View>
      ))}
    </Swiper>
  );
}

const styles = StyleSheet.create({
  paginationWrapper: {
    position: 'absolute',
    top: 40,
    width: '100%',
  },
  slide: {
    flex: 1,
    backgroundColor: Color.black,
  },
  networkImage: {
    flex: 1,
  },
});

@@ -59,18 +59,8 @@
 View
-, Platform
  %7D f
@@ -79,16 +79,16 @@
 ative';%0A
+
 import S
@@ -365,44 +365,8 @@
 %7D;%0A%0A
-type State = %7B%7C%0A  key: number,%0A%7C%7D;%0A%0A
 expo
@@ -428,378 +428,11 @@
 rops
-, State%3E %7B%0A  state = %7B%0A    key: Math.random(),%0A  %7D;%0A%0A  componentDidMount = () =%3E %7B%0A    if (Platform.OS === 'android') %7B%0A      // we need to trigger a re-render on Android to show the photo%0A      // see: https://github.com/leecade/react-native-swiper/issues/227%0A      setTimeout(() =%3E%0A        this.setState(%7B%0A          key: Math.random(),%0A        %7D),%0A      );%0A    %7D%0A  %7D;%0A
+%3E %7B
 %0A  r
@@ -786,22 +786,16 @@
  %3CSwiper
-%0A     
  renderP
@@ -827,22 +827,16 @@
 ination%7D
-%0A     
  index=%7B
@@ -856,40 +856,8 @@
 dex%7D
-%0A      key=%7Bthis.state.key%7D%0A    
 %3E%0A  

Remove no longer needed gallery hack on android