/**
 * 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, { Component } from 'react';
import { View, StyleSheet, ScrollView, Image } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import {
  Container,
  Content,
  Card,
  CardItem,
  Text,
  Body,
  Left,
  Right,
  Button,
} from 'native-base';
import * as Font from 'expo-font';
interface Iprops extends NavigationDrawerScreenProps {}
export default class InAppBrowser extends Component<Iprops> {
  state = {
    image: null,
    result: null,
    fontLoaded: false,
  };
  toggleMenu = () => this.props.navigation.toggleDrawer();
  async componentDidMount() {
    await Font.loadAsync({
      montserrat: require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  render() {
    const products: any = [
      {
        title: 'Tinder Clone starter app',
        imageUrl: require('../../assets/Common/tinder280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Grocery Shopping Full App',
        imageUrl: require('../../assets/Common/store2Door280x280.png'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Nearbuy clone starter app',
        imageUrl: require('../../assets/Common/nearBy280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Premium Chat themes starter app',
        imageUrl: require('../../assets/Common/chatterfree-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Yoga | Gym | Fitness app starter',
        imageUrl: require('../../assets/Common/yogaAppBanner280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Ticket Booking app starter',
        imageUrl: require('../../assets/Common/evento-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Taxi Booking and Driver app starter',
        imageUrl: require('../../assets/Common/taxi-combo-min-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Taxi Booking and Driver app starter',
        imageUrl: require('../../assets/Common/taxi-combo-min-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Taxi Driver app starter',
        imageUrl: require('../../assets/Common/ionDriver-300x300.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'E-commerce app starter ',
        imageUrl: require('../../assets/Common/shoppr280x280.png'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Taxi / Cab Booking app starter ',
        imageUrl: require('../../assets/Common/ioncab-banner-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Real estate app starter',
        imageUrl: require('../../assets/Common/roofon-banner-square-fb-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Short Viral news app starter',
        imageUrl: require('../../assets/Common/60words-280x280.jpg'),
        titleUrl: 'http://enappd.com/',
      },
      {
        title: 'Gym | Fitness | Yoga app starter',
        imageUrl: require('../../assets/Common/fitculture-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Grocery shopping & delivery app starter',
        imageUrl: require('../../assets/Common/store2door-banner-square-fb-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Buzzfeed style app / viral news app starter',
        imageUrl: require('../../assets/Common/viralfeed280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Doctor search /appointment app starter',
        imageUrl: require('../../assets/Common/medix-banner-square280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Netflix style video streaming app starter',
        imageUrl: require('../../assets/Common/teleflix280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Spotify style/Music streaming app starte',
        imageUrl: require('../../assets/Common/audrix280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Hotel booking app starter',
        imageUrl: require('../../assets/Common/stayinn-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Online video course app starter',
        imageUrl: require('../../assets/Common/vidzee-banner-square-fb-280x280.png'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Food delivery / search app starter',
        imageUrl: require('../../assets/Common/foodie280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Tinder Clone starter app',
        imageUrl: require('../../assets/Common/tinder-portfolio280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
      {
        title: 'Full Quiz app starter with Front-end and Backend',
        imageUrl: require('../../assets/Common/quizr-banner-square-280x280.jpg'),
        titleUrl: 'https://enappd.com/',
      },
    ];
    const { fontLoaded } = this.state;
    if (!fontLoaded) {
      return  <Container/>;
    }
    return (
      <Container>
        <HeaderCommon title='In App Browser' toggleMenu={this.toggleMenu} />
        <Text style={styles.customFont}>
          In this app we are using WebBrowser API for open In App browser.This
          API is pre-installed in managed apps. To use it in a bare React Native
          app, you have to install expo-web-browser plugin by this command `npm
          install expo-web-browser.`
        </Text>

        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
        >
          {products.map((productItems: any, index: number) => {
            return (
              <Card style={styles.cardStyle} key={index}>
                <CardItem style={styles.cardItem}>
                  <Left/>
                </CardItem>
                <CardItem button style={styles.imageItem}>
                  <Image
                    source={productItems.imageUrl}
                    style={styles.imageStyle}
                    resizeMode='contain'
                  />
                </CardItem>
                <CardItem style={styles.footerButton}>
                  <Button
                    block
                    style={styles.footerButtonContent}
                    onPress={this._handlePressButtonAsync}
                  >
                    <Text style={styles.customFont}>Open</Text>
                  </Button>
                </CardItem>
              </Card>
            );
          })}
        </ScrollView>
      </Container>
    );
  }

  _handlePressButtonAsync = async () => {
    let result = await WebBrowser.openBrowserAsync('https://enappd.com/');
    this.setState({ result });
  };
}

const styles = StyleSheet.create({
  customFont: {
    fontFamily: 'montserrat',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  headingLeftItem: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#737373',
  },
  rightIcon: {
    color: 'white',
    fontSize: 19,
  },
  editIcon: {
    color: 'white',
    fontSize: 19,
    marginLeft: 4,
  },
  cardStyle: {
    width: 250,
    borderRadius: 15,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
    marginBottom: 26,
    borderWidth: 0,
    paddingVertical: 5,
    height: 300,
  },
  imageStyle: {
    height: 200,
    width: 250,
  },
  offerButtons: {
    borderRadius: 8,
  },
  outlineOfferButtons: {
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#f53d3d',
  },
  borderedButtonText: {
    color: '#f53d3d',
  },
  cardItem: {
    borderRadius: 10,
    paddingTop: 0,
  },
  cardqtyItem: {
    borderRadius: 0,
    paddingBottom: 0,
  },
  nameItem: {
    borderRadius: 0,
    paddingTop: 0,
    paddingBottom: 0,
    justifyContent: 'flex-start',
  },
  imageItem: {
    borderRadius: 0,
    paddingTop: 0,
    paddingBottom: 0,
    justifyContent: 'center',
  },
  rateItem: {
    borderRadius: 0,
    flex: 1,
    justifyContent: 'flex-start',
    paddingBottom: 0,
  },
  nameItemText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  footerButton: {
    borderRadius: 10,
    // flex: 1,
    justifyContent: 'center',
  },
  footerButtonContent: {
    borderRadius: 4,
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#f53d3d',
  },
  swiperCards: {
    borderRadius: 10,
    height: 200,
    marginRight: 10,
  },
  imageStyleSwiper: {
    borderRadius: 10,
  },
  swiperView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  crossedText: {
    paddingLeft: 10,
    textDecorationLine: 'line-through',
  },
});
