import React from 'react';
import {
  Alert,
  Linking, 
  Platform,
  View,
  Text
} from 'react-native';
import { 
  Actionsheet
} from 'native-base';
import { openComposer } from 'react-native-email-link';
import { AdjustableText } from '../components/text';
import Icon from '../components/icons.js';
import REQUEST from './api/';

export const ContactOptions = (props) => {
  const callCustomerService = async () => {
    props.onClose();

    await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
      if(res.status == 1 && res.data){
        let url = `${Platform.OS == 'ios' ? 'telprompt:' : 'tel:'}${res.data.contact_number_mobile}`;
        if(Platform.OS === "ios") {
          Linking.canOpenURL(url).then(supported => {
            if (!supported) {
              Alert.alert("Information", "\nCall Not Supported")
            } else {
              return Linking.openURL(url)
            }
          }).catch(err => {
            console.error('An error occurred', err)
          })
        } else {
          return Linking.openURL(url)
        }
      }else{
        Alert.alert("Information", "\nSomething went wrong, please try again.")
      }
    }, function(err){  
      Alert.alert("Information", `\n${err.message}`);
    }, "ContactOptions", "Fetch")
  }

  const emailCustomerService = async () => {
    props.onClose();

    await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
      if(res.status == 1 && res.data){
        openComposer({
          to: res.data.contact_email_address_mobile,
          subject: `CN`,
          body: ''
        })
      }else{
        Alert.alert("Information", "\nSomething went wrong, please try again.");
      }
    }, function(err){
      Alert.alert("Information", `\n${err.message}`);
    }, "ContactOptions", "Fetch")
  }
  
  return (
    <>
      <Actionsheet isOpen={props.isOpen} onClose={props.onClose}>
        <Actionsheet.Content>
          <Actionsheet.Item onPress={callCustomerService}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Icon.FontAwesome name="phone" size={20} />
              <AdjustableText style={{marginLeft: 10}}>Call Customer Service</AdjustableText>
            </View>
          </Actionsheet.Item>
          <Actionsheet.Item onPress={emailCustomerService}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Icon.MaterialCommunityIcons name="email" size={20} />
              <AdjustableText style={{marginLeft: 10}}>Email Customer Service</AdjustableText>
            </View>
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>
  )
}

export const ContactOptionsWithParams = (props) => {
  const callCustomerService = async () => {
    props.onClose();

    await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
      if(res.status == 1 && res.data){
        let url = `${Platform.OS == 'ios' ? 'telprompt:' : 'tel:'}${res.data.contact_number_mobile}`;
        if(Platform.OS === "ios") {
          Linking.canOpenURL(url).then(supported => {
            if (!supported) {
              Alert.alert("Information", "\nCall Not Supported")
            } else {
              return Linking.openURL(url)
            }
          }).catch(err => {
            console.error('An error occurred', err)
          })
        } else {
          return Linking.openURL(url)
        }
      }else{
        Alert.alert("Information", "\nSomething went wrong, please try again.");
      }
    }, function(err){
      Alert.alert("Information", `\n${err.message}`);
    }, "ContactOptions", "Fetch")
  }

  const emailCustomerService = async () => {
    props.onClose();

    await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
      if(res.status == 1 && res.data){
        openComposer({
          to: res.data.contact_email_address_mobile,
          subject: `Mobile App Feedback: ${(props.params == undefined && props.params.cardnumber == undefined) ? "" : "CN"+props.params.cardnumber}`,
          body: ''
        })
      }else{
        Alert.alert("Information", "\nSomething went wrong, please try again.");
      }
    }, function(err){
      Alert.alert("Information", `\n${err.message}`);
    }, "ContactOptions", "Fetch")
  }
  
  return (
    <>
      <Actionsheet isOpen={props.isOpen} onClose={props.onClose}>
        <Actionsheet.Content>
          <Actionsheet.Item onPress={callCustomerService}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Icon.FontAwesome name="phone" size={20} />
              <AdjustableText style={{marginLeft: 10}}>Call Customer Service</AdjustableText>
            </View>
          </Actionsheet.Item>
          <Actionsheet.Item onPress={emailCustomerService}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Icon.MaterialCommunityIcons name="email" size={20} />
              <AdjustableText style={{marginLeft: 10}}>Email Customer Service</AdjustableText>
            </View>
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>
  )
}

export default {

}