import React, { useState, useEffect } from 'react';
import Container from '../components/container';
import { useRoute } from '@react-navigation/native';
import { globalStyles, customStyles, GetPageTheme } from '../styles/Global';
import { StatusBar, Image, TextInput, View, Text, ScrollView, TouchableOpacity, Platform, PermissionsAndroid, FlatList, Pressable, Linking, StyleSheet } from 'react-native';
import { ReactReduxContext, connect, useSelector, useDispatch, } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../reducers/contextProvider';
import SQLite from 'react-native-sqlite-2';
import { notify } from '../components/notify';
import moment from 'moment';
import { getDownloadJson, DownloadData } from '../controller/functions';
import { get_item, set_item, clear_item } from '../components/localStorage';
import { version, sloganline, appname, testurl, db, } from '../constants/constants';
import CustomHeader from '../components/customHeader';
import CustomLoader from '../components/CustomLoader';
import LinearGradient from 'react-native-linear-gradient';
import { Entypo, FontAwesome, Fontisto, Foundation, Ionicons, MaterialCommunityIcons } from '../components/icons';
import NoDataComponent from '../components/NoDataComponent';
import WebView from 'react-native-webview';

function ContactUs(props) {
  const route = useRoute();

  const ST = props.StaticText || {};
  // get all theme styles acc to current theme set
  const PageTheme = GetPageTheme(props.DarkMode, route.name);
  const customStyle = customStyles(props.DarkMode, route.name);
  const globalStyle = globalStyles(props.DarkMode, route.name);




  useEffect(() => {

  }, []);


  const openEmail = () => {
    const subject = encodeURIComponent('Support Request');
    const body = encodeURIComponent('Hello Team,');
    const url = `mailto:cpmindiait@cpmindia.com?subject=${subject}&body=${body}`;
    Linking.openURL(url);
  };

  return (
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS == 'ios' ? true : false)}>

      <CustomHeader {...props} showaddstore={true} title={ST.ContactUs} />
      <LinearGradient colors={[PageTheme.$gradient1, PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={customStyle.roundScrollWrapper}>
        <View style={[customStyle.pageContentWrapper, customStyle.roundScrollInner, { paddingTop: 0 }]}>

          {
            <View style={customStyle.ContUs_Wrap}>
              <View style={customStyle.ContUs_Hdr}>
                <Text style={customStyle.ContUs_HdrText}>{ST.MeetUs}</Text>
              </View>
              <View style={[customStyle.ContUs_infoBox, customStyle.mt20]}>
                <Pressable
                  onPress={() => Linking.openURL('tel:01149694969')}
                  style={({ pressed }) => [
                    styles.container,
                    pressed && styles.pressed,
                  ]}
                >
                  <Entypo name="phone" size={24} color={PageTheme.$sidemenuColor} />
                  <Text style={styles.phoneText}>011 4969 4969</Text>
                </Pressable>
              </View>

              <View style={[customStyle.ContUs_infoBox]}>
                <Pressable
                  onPress={openEmail}
                  style={({ pressed }) => [
                    styles.container,
                    pressed && styles.pressed,
                  ]}
                >
                  <FontAwesome name='envelope' size={20} color={PageTheme.$sidemenuColor} />
                  <Text style={[styles.phoneText, , { marginLeft: 12 }]}>cpmindiait@cpmindia.com</Text>
                </Pressable>
              </View>

              <View style={[customStyle.ContUs_infoBox]}>
                <Entypo name='location-pin' size={24} color={PageTheme.$sidemenuColor} />
                <Text style={customStyle.ContUs_IB_desc}>B-227, Upper Ground Floor, Okhla Industrial Area, Phase 1, New Delhi - 110020</Text>
              </View>
            </View>
          }

        </View>
      </LinearGradient>
    </Container>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactUs);

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  phoneText: {
    marginLeft: 8,
    color: '#007AFF',     // clickable blue
    textDecorationLine: 'underline',
  },
  pressed: {
    opacity: 0.6,
  },
});

