import React, { Component } from 'react';
import { Animated, Dimensions, Image, ImageBackground, ScrollView, Text, View } from 'react-native';
import { Button } from 'react-native-elements';
import { Spacer } from '../../components/common';
import colors from '../../config/colors.json';
import { strings } from '../../locales/i18n';

const SCREEN_WIDTH = Dimensions.get('window').width;
const scrollX = new Animated.Value(0);
const LOGO = require('../../../assets/logo-horizontal.png');

const BACKGROUNG_IMAGES = [
  require('../../../assets/onboarding_screen_1.jpg'),
  require('../../../assets/onboarding_screen_2.jpg'),
  require('../../../assets/onboarding_screen_3.jpg'),
  require('../../../assets/onboarding_screen_4.jpg'),
  require('../../../assets/onboarding_screen_5.jpg')
];

class Slides extends Component {
  state = { counter: 0 };

  renderSlides() {
    const position = Animated.divide(scrollX, SCREEN_WIDTH);

    return this.props.data.map((slide) => {
      const imageSource = BACKGROUNG_IMAGES[slide.index];

      return (
        <View
          key={slide.text1}
          style={styles.slideStyle}
        >
          <ImageBackground
            source={imageSource}
            style={styles.backgroundImage}
          >
            <Spacer />
            <View>
              <Image
                source={LOGO}
                style={styles.logoStyle}
              />
            </View>

            <View>
              <Text key={slide.text1} style={styles.majorTextStyle}>{slide.text1}</Text>
              <Text key={slide.text2} style={styles.minorTextStyle}>{slide.text2}</Text>
            </View>

            <View>
              <View style={{ height: 10, marginBottom: 20 }}>
                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
                  {this.props.data.map((_, i) => {
                    const opacity = position.interpolate({
                      inputRange: [i - 1, i, i + 1],
                      outputRange: [0.3, 1, 0.3],
                      extrapolate: 'clamp'
                    });

                    return (
                      <Animated.View
                        key={i}
                        style={{ opacity, height: 10, width: 10, backgroundColor: '#595959', margin: 8, borderRadius: 5 }}
                      />
                    );
                  })}
                </View>
              </View>
            </View>

            <View>
              <Button
                title={strings('slides.button')}
                buttonStyle={styles.buttonStyle}
                onPress={this.props.onComplete}
                fontWeight="bold"
                fontSize={25}
                color={colors.white}
              />
            </View>
          </ImageBackground>
        </View>
      );
    });
  }

  render() {
    return (
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: colors.white }}
        keyboardShouldPersistTaps="handled"
      >
        <ScrollView
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { x: scrollX } } }]
          )}
          scrollEventThrottle={16}
        >
          {this.renderSlides()}
        </ScrollView>
      </ScrollView>
    );
  }
}

const styles = {
  slideStyle: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: SCREEN_WIDTH,
    backgroundColor: colors.transparent
  },
  majorTextStyle: {
    fontSize: 30,
    fontWeight: 'bold',
    color: colors.black,
    textAlign: 'center',
    marginHorizontal: 30,
    marginBottom: 30
  },
  minorTextStyle: {
    fontSize: 25,
    color: colors.black,
    textAlign: 'center',
    marginHorizontal: 25,
  },
  logoStyle: {
    height: SCREEN_WIDTH * 0.23,
    width: SCREEN_WIDTH * 0.8,
    marginVertical: 15,
    alignSelf: 'center'
  },
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
    alignSelf: 'stretch',
    justifyContent: 'space-between'
  },
  buttonStyle: {
    width: SCREEN_WIDTH * 0.9,
    marginTop: 15,
    marginBottom: 30,
    borderWidth: 2,
    borderRadius: 5,
    backgroundColor: colors.buttonBlue,
    borderColor: colors.buttonBlue
  }
};

export { Slides };
