/**
 * 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 { Share, StyleSheet } from 'react-native';
import { Container, View, Text, Button } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import InputBlock from '../../components/firebase/InputBlock';
import * as Font from 'expo-font';
interface Iprops extends NavigationDrawerScreenProps {}
export default class ShareExample extends Component<Iprops> {
  state = {
    message: '',
    title: '',
    url: '',
    fontLoaded: false,
  };
  onShare = async () => {
    try {
      const { message, title, url } = this.state;
      const result = await Share.share({
        message: message,
        title: title,
        url: url,
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };
  toggleMenu = () => this.props.navigation.toggleDrawer();
  onChangeText = (name: string, value: string) =>
    this.setState({
      [name]: value,
    });
  async componentDidMount() {
    await Font.loadAsync({
      montserrat: require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    const { message, title, url, fontLoaded } = this.state;
    if (!fontLoaded) {
      return <Container></Container>;
    }
    return (
      <Container>
        <HeaderCommon title="Social Share" toggleMenu={this.toggleMenu} />
        <View style={styles.container}>
          <Text style={styles.paragraph}>
            For Social Share we are using `Share` API.This API is preinstalled
            in all react-native apps.
          </Text>

          <InputBlock
            name="message"
            onChangeText={(value) => this.onChangeText('message', value)}
            value={message}
            type="text"
          />
          <InputBlock
            name="title"
            onChangeText={(value) => this.onChangeText('title', value)}
            value={title}
            type="text"
          />
          <InputBlock
            name="url"
            onChangeText={(value) => this.onChangeText('url', value)}
            value={url}
            type="text"
          />
          <Button onPress={this.onShare} style={styles.buttonCss}>
            <Text>Share</Text>
          </Button>
        </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',
  },
  online: {
    color: 'green',
  },
  offline: {
    color: 'red',
  },
  textCssButton: {
    color: 'white',
    fontFamily: 'montserrat',
    width: '100%',
    textAlign: 'center',
  },
  buttonCss: {
    width: '100%',
    marginTop: 20,
    justifyContent: 'center',
  },
  imageCss: { width: 200, height: 200, margin: 24 },
});
