import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  TouchableOpacity,
  SafeAreaView,
  ScrollView,
  Image,
  Linking,
  Alert,
  Share
} from "react-native";
import Text from "react-native-text";
import { observable } from "mobx";
import Loader from '../../components/Public/loader'
import { observer, inject } from "mobx-react/native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
import Icon from "react-native-vector-icons/dist/Ionicons";
import { width, height } from "../../config/screen";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
import language from "../../config/language";
const size = new Size();

@inject(["menuStore"], ["userStore"])
@observer
export default class Settings extends Component {
  @observable
  items = [
    {
      icon: require("../../images/settingrefer.png"),
      popup: true,
      id: 0
    },
    {
      icon: require("../../images/promo.png"),
      screen:'myCoupons',
      popup: true,
      id: 1
    },
    {
      icon: require("../../images/settingsetting.png"),
      screen: "SettingInside",
      popup: false,
      id: 2
    },
    {
      icon: require("../../images/settingt_c.png"),
      popup: true,
      id: 3
    },

    {
      icon: require("../../images/settingprivacy.png"),
      popup: true,
      id: 4
    },

    {
      icon: require("../../images/settingcontact.png"),
      popup: true,
      id: 5
    }
  ];

  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }

  static navigationOptions = {
    drawerLabel: "Settings",
    swipeEnabled: false,
    tabBarLabel: language.en.setting
  };
  getTitle(id) {
    switch (id) {
      case 0:
        return this.props.userStore.text.referYourFriends;
        break;
        case 1:
        return this.props.userStore.text.myCoupons;
        case 2:
        return this.props.userStore.text.setting;
        break;
      case 3:
        return this.props.userStore.text.termandconditions;
        break;
      case 4:
        return this.props.userStore.text.privacy;
        break;
      case 5:
        return this.props.userStore.text.contactUs;
        break;
    }
  }

  onPressAction(index) {
    if (this.items[index].popup) {
      switch (index) {
        case 0:
          this.referYourFriender();
          break;
        case 1:
         this.store.userCoupon(this,this.userStore.userData.data.token,true)
          break;
        case 3:
          Linking.openURL("https://www.hangryfood.co/terms-and-conditions");
          break;
        case 4:
          Linking.openURL("https://www.hangryfood.co/privacy-statement");
          break;
        case 5:
          Linking.openURL("mailto:support@hangryfood.co?subject=&body=");
          break;
      }
    } else {
     // console.log(this.items[index].screen);
      this.props.navigation.navigate(this.items[index].screen);
    }
  }

  logoutAlert() {
    Alert.alert(
      "Logout",
      "Are you sure to Logout?",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "Sure", onPress: () => this.logoutAction() }
      ],
      { cancelable: false }
    );
  }

  referYourFriender() {
   //const link = Platform.OS === 'ios' ? 'itms://itunes.apple.com/us/app/apple-store/1439173696?mt=8'  : '';
   var sharemessage = ""
   if (this.userStore.language == 'english'){
    sharemessage = this.store.sharemessage[0].contentEn
   }else{
    sharemessage = this.store.sharemessage[0].content
   }
   const link = "http://onelink.to/mh4dh2"
    Share.share({
      message: sharemessage+link,
      title: "Hangry no more"
    });
  }

  logoutAction() {
    this.userStore.logoutPost(this);
  }
  navigatieAction(page) {
    this.props.navigation.navigate(page);
  }

  renderItems() {
    return this.items.map((item, index, array) => {
      if (item.id == 1 && !this.userStore.logined) {
        return null;
      } else {
        return (
          <TouchableOpacity
            style={{ marginBottom: 20, marginLeft: 25, paddingRight: 25 }}
            onPress={() => this.onPressAction(index)}
          >
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-between"
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <Image source={item.icon} />
                <Text
                  style={{
                    fontSize: 15,
                    marginLeft: 10,
                    color: theme.coolGrey,
                    fontWeight: "bold",
                    fontFamily: Fonts.century
                  }}
                >
                  {this.getTitle(item.id)}
                </Text>
              </View>
              <View>
                <Icon
                  name={"ios-arrow-forward"}
                  size={size.getSize(35)}
                  color={theme.coolGrey}
                />
              </View>
            </View>
            <View
              style={{
                backgroundColor: theme.inputBgc,
                flex: 1,
                marginTop: 5,
                marginLeft: 40,
                height: 1
              }}
            />
          </TouchableOpacity>
        );
      }
    });
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
       <Loader loading = {this.store.loading}/>
        <View style={{ height: verticalScale(40) }} />
        <ScrollView style={{ backgroundColor: "white" }}>
          <View
            style={{
              backgroundColor: "white",
              width: width,
              marginTop: 25
            }}
          >
            {this.renderItems()}
            <View style={{ flex: 1, alignItems: "flex-end", paddingRight: 25 }}>
              <Text
                style={{
                  fontFamily: Fonts.century,
                  color: theme.coolGrey,
                  fontSize: 11
                }}
              >
                follow us on
              </Text>
              <View style={{ flexDirection: "row", paddingTop: 10 }}>
                <Image source={require("../../images/settingfb.png")} />
                <Image
                  source={require("../../images/settingig.png")}
                  style={{ marginLeft: 5 }}
                />
              </View>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.mainColor
  }
});