/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import AppIntroSlider from 'react-native-app-intro-slider';
import { Container } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import * as Font from 'expo-font';
interface Iprops extends NavigationDrawerScreenProps {
}
const styles = StyleSheet.create({
  mainContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  image: {
    width: 320,
    height: 320,
  },
  text: {
    color: 'rgba(255, 255, 255, 0.8)',
    backgroundColor: 'transparent',
    textAlign: 'center',
    paddingHorizontal: 16,
    fontFamily: 'montserrat',
  },
  title: {
    fontSize: 22,
    color: 'white',
    backgroundColor: 'transparent',
    textAlign: 'center',
    marginBottom: 16,
    fontFamily: 'montserrat',
  }, imageStyle: {
    height: 200,
    width: 250,
  },
});

const slides = [
  {
    key: 'something',
    title: 'Super customizable',
    text: 'Usage is all free!',
    icon: 'ios-images-outline',
    colors: ['orange', 'yellow'],
    modalImage: require('../../assets/Common/undraw1.png')
  },
  {
    key: 'something1',
    title: 'Super customizable',
    text: 'Usage is all free',
    icon: 'ios-options-outline',
    colors: ['orange', 'yellow'],
    modalImage: require('../../assets/Common/undraw2.png')
  },
  {
    key: 'something2',
    title: 'Super customizable',
    text: 'Usage is all free',
    icon: 'ios-beer-outline',
    colors: ['orange', 'yellow'],
    modalImage: require('../../assets/Common/undraw1.png')
  },
];

export default class AppIntroSlidesExample extends React.Component<Iprops> {
  state = {
    fontLoaded: false
  };
  async componentDidMount() {
    await Font.loadAsync({
      'montserrat': require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  _renderItem = ({ item }) => {
    return (
      <LinearGradient
        style={[styles.mainContent, {
          width: '100%',
          height: '100%',
        }]}
        colors={['orange', 'yellow']}
        start={{ x: 0, y: .1 }} end={{ x: .1, y: 1 }}
      >
        <View>
          <Image
            source={item.modalImage}
            style={styles.imageStyle}
            resizeMode="contain"
          />
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.text}>{item.text}</Text>
        </View>
      </LinearGradient>
    )
  };
  toggleMenu = () => this.props.navigation.toggleDrawer();
  render() {
    const { fontLoaded } = this.state;
    if (!fontLoaded) {
      return <Container></Container>
    }
    return (
      <Container>
        <HeaderCommon title='Slides' toggleMenu={this.toggleMenu} />
        <AppIntroSlider
          data={slides}
          renderItem={this._renderItem}
          bottomButton
        />
      </Container>
    );
  }
}