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 { 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 Icon2 from "react-native-vector-icons/dist/MaterialCommunityIcons";
import { width, height } from "../../config/screen";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
import PopupDialog, { SlideAnimation } from "react-native-popup-dialog";
import language from "../../config/language";
const size = new Size();
const slideAnimation = new SlideAnimation({
  slideFrom: "bottom"
});

@inject(["menuStore"], ["userStore"])
@observer
export default class SettingInside extends Component {
  @observable
  items = [
    {
      icon: require("../../images/settinglang.png"),
      popup: true,
      screen: "language",
      id: 0
    },

    {
      icon: require("../../images/settingnotification.png"),
      screen: "NotificationSetting",
      popup: true,
      id: 1
    },
    {
      icon: require("../../images/settinghowtouse.png"),
      popup: true,
      id: 2
    },

    {
      icon: require("../../images/settinglogout.png"),
      popup: true,
      id: 3
    }
  ];
  @observable
  lang = false;
  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.language;
        break;
      case 1:
        return this.props.userStore.text.notification;
        break;
      case 2:
        return this.props.userStore.text.howtouse;
        break;
      case 3:
        return this.props.userStore.text.logout;
        break;
    }
  }

  componentWillMount() {
    if (this.userStore.languageSelection == "english") {
      this.lang = false;
    } else {
      this.lang = true;
    }
  }

  languageText() {
    if (this.userStore.languageSelection == "english") {
      return "English";
    } else {
      return "繁體中文";
    }
  }

  languageView(id) {
    if (id == 0) {
      return (
        <View style={{ justifyContent: "center" }}>
          <Text
            style={{
              fontSize: 15,
              marginRight: scale(30),
              color: theme.coolGrey,
              fontWeight: "bold",
              fontFamily: Fonts.century
            }}
          >
            {this.languageText()}
          </Text>
        </View>
      );
    } else {
      return <View />;
    }
  }

  onPressAction(index) {
    if (this.items[index].popup) {
      switch (index) {
        case 0:
          this.languagePagePopUp();
          break;
        case 1:
          Linking.openURL("app-settings:");
          break;
        case 2:
          this.props.navigation.navigate("Tutorial", { data: "setting" });
          break;
        case 3:
          this.logoutAlert();
          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() {
    Share.share({
      message: "Hello,Come to join Hangry, this is my refer code: ",
      title: "Hangry no more"
    });
  }

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

  renderItems() {
    return this.items.map((item, index, array) => {
      if (item.id == 3 && !this.userStore.logined) {
        return null;
      } else {
        if (item.id == 1 && Platform.OS !== 'ios') {
          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 style={{ flexDirection: "row" }}>
                {this.languageView(item.id)}
                <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>
        );
      }
    }
    });
  }

  languagePagePopUp() {
    this.popupDialog.show();
  }

  languagePageDismiss() {
    this.popupDialog.dismiss();
  }

  updateUser() {
    if (this.lang) {
      this.userStore.saveLanguage("chinese");
      this.popupDialog.dismiss();
    } else {
      this.userStore.saveLanguage("english");
      this.popupDialog.dismiss();
    }
  }

  languagePageDismissedCallBack() {
    console.log("dismiss dialog");
    if (this.userStore.languageSelection == "english") {
      this.lang = false;
    } else {
      this.lang = true;
    }
  }

  selectIcon(lang) {
    if (!lang) {
      if (!this.lang) {
        return (
          <Icon2
            name={"checkbox-blank-circle"}
            size={size.getSize(35)}
            color={theme.mainColor}
          />
        );
      } else {
        return (
          <Icon2
            name={"checkbox-blank-circle-outline"}
            size={size.getSize(35)}
            color={theme.mainColor}
          />
        );
      }
    } else {
      if (!this.lang) {
        return (
          <Icon2
            name={"checkbox-blank-circle-outline"}
            size={size.getSize(35)}
            color={theme.mainColor}
          />
        );
      } else {
        return (
          <Icon2
            name={"checkbox-blank-circle"}
            size={size.getSize(35)}
            color={theme.mainColor}
          />
        );
      }
    }
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{ height: verticalScale(40) }}>
          <Icon2
            name="chevron-left"
            size={size.getSize(40)}
            color={"white"}
            style={{ marginLeft: 10 }}
            onPress={() => this.props.navigation.goBack()}
          />
        </View>
        <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: 10
                }}
              >
                {"Ver 4.4    28 - 3 - 2019"}
              </Text>
            </View>
          </View>
        </ScrollView>
        <PopupDialog
          ref={popupDialog => {
            this.popupDialog = popupDialog;
          }}
          dialogAnimation={slideAnimation}
          height={height / 4}
          width={width - scale(60)}
          onDismissed={() => this.languagePageDismissedCallBack()}
        >
          <View style={{ flex: 1, justifyContent: "space-between" }}>
            <View style={{ flex: 4, paddingTop: 5 }}>
              <Text
                style={{
                  paddingLeft: 5,
                  fontSize: 15,
                  color: theme.coolGrey,
                  fontWeight: "bold",
                  fontFamily: Fonts.century
                }}
              >
                {this.userStore.text.slectLang}
              </Text>
              <TouchableOpacity
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center"
                }}
                onPress={() => (this.lang = false)}
              >
                <Text
                  style={{
                    paddingLeft: 5,
                    fontSize: 15,
                    color: theme.coolGrey,
                    fontWeight: "bold",
                    fontFamily: Fonts.century
                  }}
                >
                  English
                </Text>
                {this.selectIcon(false)}
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center"
                }}
                onPress={() => (this.lang = true)}
              >
                <Text
                  style={{
                    paddingLeft: 5,
                    fontSize: 15,
                    color: theme.coolGrey,
                    fontWeight: "bold",
                    fontFamily: Fonts.century
                  }}
                >
                  繁體中文
                </Text>
                {this.selectIcon(true)}
              </TouchableOpacity>
            </View>
            <TouchableOpacity
              onPress={() => this.updateUser()}
              style={{
                backgroundColor: theme.mainColor,
                flex: 1,
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Text
                style={{
                  fontSize: 15,
                  color: "white",
                  fontWeight: "bold",
                  fontFamily: Fonts.century
                }}
              >
                OK
              </Text>
            </TouchableOpacity>
          </View>
        </PopupDialog>
      </SafeAreaView>
    );
  }
}

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