import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Homelanding from './homelandig';
import { fromLeft, fromRight } from 'react-navigation-transitions';

class HomeScreen extends React.Component {
  render() {
    return (
      <Homelanding styleimg={{width: 170 ,height: 170,justifyContent: 'center',}} onPressN={() => this.props.navigation.navigate('Home1')} title="Welcome to Mumtak" text={"With Mumtak you will be able to share moments and places with the Mumtak community.\nLet's learn how to do it together."}/>
    );
  }
}

class H1 extends React.Component {
  render() {
    return (
      <Homelanding styleimg={{width: 300 ,height: 300,justifyContent: 'center',}} onPressB={() => this.props.navigation.goBack()} onPressN={() => this.props.navigation.navigate('Home2')} title="Discover Taks around you" text={"What is a Tak exactly?!\nA Tak is a monument, a friend, a page of your diary, the memory of a moment expressed in Augmented Reality.You will find Taks around you, and you will be able to interact with them, or you can tell a story to the world with a new Tak!"}/>
    );
  }
}

class H2 extends React.Component {
  render() {
    return (
      <Homelanding styleimg={{width: 300 ,height: 300,justifyContent: 'center',}} onPressB={() => this.props.navigation.goBack()} onPressN={() => this.props.navigation.navigate('Welcome')} title="Second test page" text={"That stuff doesn't work well"}/>
    );
  }
}
const handleCustomTransition = ({ scenes }) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  // Custom transitions go there
  if (prevScene
    && prevScene.route.routeName === 'Home1'
    && nextScene.route.routeName === 'Welcome'
    || prevScene
    && prevScene.route.routeName === 'Home2'
    && nextScene.route.routeName === 'Home1') {
    return fromLeft();
  } else
    return fromRight();
}

const AppNavigator = createStackNavigator(
  {
    Welcome: {
      screen: HomeScreen,
      navigationOptions: {
        header: null,
      }
    },
    Home1:{
      screen: H1,
      navigationOptions: {
        header: null,
      }
    },
    Home2: {
      screen: H2,
      navigationOptions: {
        header: null,
      }
    }
  },
  {
    initialRouteName: 'Welcome',
    transitionConfig: (nav) => handleCustomTransition(nav),
  },
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}