import React, { useEffect } from 'react';
import {
  Linking, 
  Platform,
  View,
  Text
} from 'react-native';
import { 
  Actionsheet
} from 'native-base';
import { openComposer } from 'react-native-email-link';
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:'
            Linking.canOpenURL(url).then(supported => {
                if (!supported) {
                  console.log('Cant handle url')
                  alert("Call Not Supported")
                } else {
                  return Linking.openURL(`${url}${res.data.contact_number_mobile}`)
                }

              }).catch(err => {
                console.error('An error occurred', err)
              })
        }else{
            console.log(res.message, res.data)
        }
    }, function(error){  
        console.log(error)
    })
  }

  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{
            console.log(res.message, res.data)
        }
    }, function(error){  
        console.log(error)
    })
  }
  
  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} />
              <Text style={{marginLeft: 10}}>Call Customer Service</Text>
            </View>
          </Actionsheet.Item>
          <Actionsheet.Item onPress={emailCustomerService}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Icon.MaterialCommunityIcons name="email" size={20} />
              <Text style={{marginLeft: 10}}>Email Customer Service</Text>
            </View>
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>
  )
}

export const ContactOptionsWithParams = (props) => {
  // let options = [
  //     {text: 'Call Customer Service', icon: 'call-outline', execute: async () => {

  //         await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
  //             if(res.status == 1 && res.data){
  //                 let url = Platform.OS == 'ios' ? 'telprompt:' : 'tel:'
  //                 Linking.canOpenURL(url).then(supported => {
  //                     if (!supported) {
  //                       console.log('Cant handle url')
  //                       alert("Call Not Supported")
  //                     } else {
  //                       return Linking.openURL(`${url}${res.data.contact_number_mobile}`)
  //                     }
  //                   }).catch(err => {
  //                     console.error('An error occurred', err)
  //                   })
  //             }else{
  //                 console.log(res.message, res.data)
  //             }
  //         }, function(error){  
  //             console.log(error)
  //         })

          
  //     }},
  //     {text: 'Email Customer Service', icon: 'mail-outline', execute: async () => {
          
  //         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: ${(params == undefined && params.cardnumber == undefined) ? "" : "CN"+params.cardnumber}`,
  //                   body: ''
  //                 })

  //             }else{
  //                 console.log(res.message, res.data)
  //             }
  //         }, function(error){  
  //             console.log(error)
  //         })

  //     }},

  //     {text: 'Cancel', execute: () => ActionSheet.hide()}
  // ]

  // ActionSheet.show(
  //     {
  //       options: options,
  //       title: "Select an option",
  //       destructiveButtonIndex: 2,
  //       cancelButtonIndex: 2
  //     },
  //     buttonIndex => {
  //       options[buttonIndex].execute()
  //     }
  // )
  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:'
          Linking.canOpenURL(url).then(supported => {
              if (!supported) {
                console.log('Cant handle url')
                alert("Call Not Supported")
              } else {
                return Linking.openURL(`${url}${res.data.contact_number_mobile}`)
              }
            }).catch(err => {
              console.error('An error occurred', err)
            })
      }else{
          console.log(res.message, res.data)
      }
    }, function(error){  
        console.log(error)
    })
  }

  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{
          console.log(res.message, res.data)
      }
    }, function(error){  
        console.log(error)
    })
  }
  
  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} />
              <Text style={{marginLeft: 10}}>Call Customer Service</Text>
            </View>
          </Actionsheet.Item>
          <Actionsheet.Item onPress={emailCustomerService}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Icon.MaterialCommunityIcons name="email" size={20} />
              <Text style={{marginLeft: 10}}>Email Customer Service</Text>
            </View>
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>
  )
}

export default {

}