import * as SecureStore from "expo-secure-store";
import {
  Alert,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { Notifications } from "expo";
import * as Permissions from "expo-permissions";
import CodeInput from "react-native-confirmation-code-input";
import CountDown from "react-native-countdown-component";
import React from "react";
import { dh, dw } from "../../Components/Scaler";
import { storeData, retrieveData } from "../../Components/Helpers";
import LoadingScreen from "../../Components/LoadingScreen";
import Styler from "../../Components/Styler";
import Touchable from "../../Components/Touchable";
import api from "../../Constants/Api";
import colors from "../../Constants/Colors";

const styles = StyleSheet.create({
  ...Styler,
});
export default class CredentialsScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
    this.codeInputRef2 = React.createRef();
  }

  userCreating = (user) => {
    retrieveData("lastUser").then((lastUser) => {
      let req;
      if (lastUser) {
        req = { user, lastUser };
      } else {
        req = { user, lastUser: null };
      }
      fetch(`${api}api/user`, {
        body: JSON.stringify(req),
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        method: "POST",
      })
        .catch((error) => {
          console.log(error);
          Alert.alert("Проверьте подключение к интернету");
        })
        .then((response) => response.json())
        .then((responseJson) => {
          if (responseJson.status === "success") {
            if (responseJson.token) {
              SecureStore.setItemAsync("access_token", responseJson.token.access);
              SecureStore.setItemAsync(
                "refresh_token",
                responseJson.token.refresh,
              );
            }
            storeData("user", responseJson.user);

            if (responseJson.user.type === "barista") {
              this.props.navigation.navigate("Staff");
            } else {
              this.props.navigation.navigate("Main", {
                username: this.props.navigation.state.params.name,
              });
            }
          } else {
            this.setState({ loading: false });
            Alert.alert("Неверный код");
          }
        });
    });
  }

  onFinishCheckingCode2 = async (isValid, code) => {
    this.setState({ loading: true });
    let token;
    const { status } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
    if (status === "granted") {
      try {
        token = await Notifications.getExpoPushTokenAsync();
      } catch (err) {
        this.setState({ loading: false });
        console.log(err);
      }
    }

    retrieveData("place").then((place) => {
      if (place) {
        const user = {
          code,
          name: this.props.navigation.state.params.name,
          phone: this.props.navigation.state.params.phone,
          place: place._id,
        };
        if (token) {
          user.pushToken = token;
        }
        this.userCreating(user);
      } else {
        const user = {
          code,
          name: this.props.navigation.state.params.name,
          phone: this.props.navigation.state.params.phone,
        };
        if (token) {
          user.pushToken = token;
        }
        this.userCreating(user);
      }
    });
  };

  render() {
    if (this.state.loading) {
      return <LoadingScreen />;
    }
    return (
      <ScrollView
        scrollEnabled={false}
        keyboardShouldPersistTaps="handled"
        style={styles.containerWhite}
        contentContainerStyle={styles.containerBlock}
      >
        <StatusBar barStyle="dark-content" hidden={false} />
        <View style={styles.fieldsContainer}>
          <View
            style={{
              ...styles.EndColumn,
              flex: 1,
            }}
          >
            <Text style={styles.verificationText}>Введите код из смс:</Text>
          </View>
          <CodeInput
            containerStyle={styles.codeInputContainer}
            size={50 * dw}
            ref={this.codeInputRef2}
            keyboardType="numeric"
            codeLength={6}
            inactiveColor={colors.gray}
            activeColor={colors.gray}
            className="border-b"
            cellBorderWidth={2 * dw}
            compareWithCode="123456"
            space={8 * dw}
            codeInputStyle={styles.verificationText}
            onFulfill={(isValid, code) => this.onFinishCheckingCode2(isValid, code)}
          />
        </View>
        <View style={{ flexDirection: "row" }}>
          <Touchable
            style={{
              ...styles.CenterEndColumn,
              flex: 2,
              marginHorizontal: 15 * dw,
            }}
          >
            <Text style={{ color: colors.gray, fontSize: 15 * dh }}>
                Отправить код повторно
            </Text>
          </Touchable>
          <CountDown
            timeToShow={["S"]}
            digitBgColor={colors.gray}
            timeTxtColor={colors.white}
            digitTxtColor={colors.white}
            style={{ alignItems: "flex-start", flex: 1 }}
            labelS=""
            until={59}
            onFinish={() => Alert.alert("Период действия кода закончился")}
            size={20 * dh}
          />
        </View>
        <View style={styles.lastBlock}>
          <Touchable
            onPress={() => this.props.navigation.navigate("CredentialsScreen")}
            style={styles.button}
          >
            <Text style={styles.Bold21White}>Назад</Text>
          </Touchable>
        </View>
      </ScrollView>
    );
  }
}