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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingBottom: 33,
    },
    tabContent: {
        backgroundColor: "#fff",
        marginTop: 20,
    },
    img: {
        width: 100,
        height: 100,
        alignSelf: "center",
    },
    img2: {
        width: 97,
        height: 21,
        alignSelf: "center",
        marginTop: 2,
    },
    text: {
        marginTop: 16,
    },
    layoutLeft: {
        // flexDirection: "row",
        paddingVertical: 10,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 50,
    },
    form: {
        paddingHorizontal: 26,
        paddingVertical: 20,
    },
    textareaContainer: {
        backgroundColor: "#F0F0F0",
        height: 100,
        borderRadius: 4,
    },
    textarea: {
        textAlignVertical: "top", // hack android
        fontSize: 13,
        color: "#333",
        paddingHorizontal: 14,
        paddingVertical: 10,
        height: 100,
    },
});


export default function Guide1Screen() {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const {  changeGuideStep } = useModel("userModel", true);

    const { complete,guide4_title1,guide4_title2 } = useModel("wordsModel");
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
        }, [])
    );

    return (
      <>
        <GuideHeaderBar />
        <ScrollPage>
          <Layout style={styles.container}>
            <Card appearance='headFilled'>
              <Text category='s1'>{guide4_title1}</Text>
              <Text category='s1'>{guide4_title2}</Text>
            </Card>

            <Layout style={styles.layoutLeft} level='1'>
              <Button
                status='primary'
                onPress={() =>
                                changeGuideStep(5)}
              >
                {complete}
              </Button>
            </Layout>
            <ConnectButton />
          </Layout>
        </ScrollPage>
      </>
    );
}