import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { useFocusEffect } from "@react-navigation/native";
import { Image, StyleSheet } from "react-native";
import { useModel } from "flooks";
import { Layout, Text, useTheme, Button } from "@ui-kitten/components";
import NavHeaderBar from "../components/NavHeaderBar";
import ConnectButton from "../components/ConnectButton";
import ScrollPage from "../components/ScrollPage";

const img = require("../assets/images/shehe1.png");
const img1 = require("../assets/images/shenhe.png");
const img2 = require("../assets/images/shehe2.png");

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 33,
    paddingVertical: 40,
    alignItems: "center",
  },
  icon: {
    width: 90,
    height: 80,
    marginBottom: 26,
  },
  text: {
    fontWeight: "500",
    marginBottom: 7,
  },
  button: {
    marginTop: 19,
  },
});

export default function StoreAudit() {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { status, changeGuideStep, getUserInfo } = useModel("userModel");

  const {
    storeAudio,
    storeAudioText1,
    storeAudioText2,
    storeAudioText3,
    storeAudioText4,
    complete,
    TGJPSZ,
    LIVTXF,
    GODOSA,
  } = useModel("wordsModel");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
    }, [])
  );

  function refreshEvent() {
    return getUserInfo();
  }

  const PENDINGInfo = () => (
    <>
      <Image source={img1} style={styles.icon} />
      <Text category="h6" status="info" style={styles.text}>
        {storeAudioText1}
      </Text>
      <Text category="h6" status="info" style={styles.text}>
        {storeAudioText2}
      </Text>
    </>
  );

  const PASSInfo = () => (
    <>
      <Image source={img} style={styles.icon} />
      <Text category="h6" status="primary" style={styles.text}>
        {storeAudioText3}
      </Text>
      <Text category="h6" status="primary" style={styles.text}>
        {storeAudioText4}
      </Text>
      <Button style={styles.button} onPress={() => changeGuideStep("finish")}>
        {complete}
      </Button>
    </>
  );

  const DENYInfo = () => (
    <>
      <Image source={img2} style={styles.icon} />
      <Text category="h6" status="danger" style={styles.text}>
        {TGJPSZ}
      </Text>
      <Text category="h6" status="danger" style={styles.text}>
        {LIVTXF}
      </Text>
      <Button style={styles.button} onPress={() => changeGuideStep("ComeBack")}>
        {GODOSA}
      </Button>
    </>
  );

  return (
    <>
      <NavHeaderBar title={storeAudio} back={false} />
      <ScrollPage enabledFresh refreshEvent={refreshEvent}>
        <Layout style={styles.container}>
          {status === "PENDING" && <PENDINGInfo />}
          {status === "PASS" && <PASSInfo />}
          {status === "DENY" && <DENYInfo />}

          <ConnectButton />
        </Layout>
      </ScrollPage>
    </>
  );
}