/**
 * 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 { Modal, Text, View, Alert, StyleSheet } from 'react-native';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import * as Font from 'expo-font';
import { ScrollView, Image } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
import {
  Container,
  Content,
  Card,
  CardItem,
  Body,
  Left,
  Right,
  Button,

} from 'native-base';
interface Iprops extends NavigationDrawerScreenProps {
}
export default class ModalExample extends Component<Iprops> {
  state = {
    modalVisible: false,
    fontLoaded: false,
    modalImage: require('../../assets/Common/quizr-banner-square-280x280.jpg')
  };

  async componentDidMount() {
    await Font.loadAsync({
      'montserrat': require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  toggleMenu = () => this.props.navigation.toggleDrawer();

  setModalVisible(visible: any) {
    this.setState({ modalVisible: visible });
  }
  _handlePressButtonAsync = async (image: any) => {
    // let result = await WebBrowser.openBrowserAsync('https://enappd.com/');
    // this.setState({ result });
    this.setState({
      modalVisible: true,
      modalImage: image
    });
  };
  render() {
    const { fontLoaded, modalImage } = this.state;
    const images: any = [
      {
        imageUrl: require('../../assets/Common/vidzee-banner-square-fb-280x280.png'),
      },
      {
        imageUrl: require('../../assets/Common/foodie280x280.jpg'),
      },
      {
        imageUrl: require('../../assets/Common/tinder-portfolio280x280.jpg'),
      },
      {
        imageUrl: require('../../assets/Common/quizr-banner-square-280x280.jpg'),
      },
    ];
    if (!fontLoaded) {
      return <Container></Container>;
    }
    return (
      <Container>
        <HeaderCommon title='Modal Example' toggleMenu={this.toggleMenu} />
        <View style={styles.container}>
          <View>

          </View>
          <Text style={styles.paragraph}>For adding Modal in React Native app we are using `Modal` API from `react native` pacakge</Text>
          <Text style={styles.paragraph}>This API is pre-installed in all react native apps.</Text>
          <Modal
            animationType="slide"
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() => {
              Alert.alert('Modal has been closed.');
            }}>
            <View style={styles.container}>
              <Text style={styles.paragraph}>Hello World!</Text>
              {modalImage ? <Image
                source={modalImage}
                style={styles.imageStyle}
                resizeMode="contain"
              /> : null}
              <Button
                style={{
                  ...styles.buttonStyle, ...{
                    marginTop: 10
                  }
                }}
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text style={{ ...styles.paragraph, ...styles.white }}>Hide Modal</Text>
              </Button>
            </View>
          </Modal>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
          >
            {images.map((productItems: any, index: number) => {
              return (
                <Card style={styles.cardStyle} key={index}>
                  <CardItem
                    style={styles.cardItem}
                  >
                    <Left>
                    </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(productItems.imageUrl)}
                    >
                      <Text style={styles.customFont}>Open Modal</Text>
                    </Button>
                  </CardItem>
                </Card>
              )
            })}
          </ScrollView>
        </View>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 },
  paragraph: {
    fontFamily: 'montserrat',
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
    color: '#34495e',
  },
  buttonStyle: {
    width: '100%',
    justifyContent:'center'
  },
  buttonStylePaper: {
    width: '100%',
    justifyContent: 'center'
  },
  white: {
    color: 'white'
  },
  customFont: {
    fontFamily: 'montserrat',
    color: 'white'
  },
  cardStyle: {
    width: 250,
    borderRadius: 15,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
    marginBottom: 26,
    borderWidth: 0,
    paddingVertical: 5,
    height: 300
  },
  imageStyle: {
    height: 200,
    width: 250,
  },
  cardItem: {
    borderRadius: 10,
    paddingTop: 0
  },
  imageItem: {
    borderRadius: 0,
    paddingTop: 0,
    paddingBottom: 0,
    justifyContent: 'center',
  },
  footerButton: {
    borderRadius: 10,
    // flex: 1,
    justifyContent: 'center',

  },
  footerButtonContent: {
    borderRadius: 4,
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#f53d3d'

  },
});