import * as React from "react";
import {
    Text,
    Layout,
    Button,
} from "@ui-kitten/components";
import {
    StyleSheet,
    View,
} from "react-native";
import { useModel } from "flooks";
import Textarea from "react-native-textarea";
import ScrollPage from "../../components/ScrollPage";
import NavHeaderBar from "../../components/NavHeaderBar";


const styles = StyleSheet.create({
    lay: {
        paddingHorizontal: 15,
        paddingVertical: 20,
        marginTop: 10,
    },
    top: {
        paddingVertical: 20,
        paddingHorizontal: 13,
    },
    imgList: {
        flexDirection: "row",
    },
    upload: {
        marginRight: 10,
        width: 67,
        flexShrink: 0,
    },
    textareaContainer: {
        backgroundColor: "#F0F0F0",
        height: 100,
        alignSelf: "stretch",
        borderRadius: 4,
    },
    textarea: {
        textAlignVertical: "top", // hack android
        fontSize: 13,
        color: "#333",
        paddingHorizontal: 14,
        paddingVertical: 10,
        height: 100,
    },
    text: {
        paddingBottom: 10,
    },
    button: {
        alignSelf: "flex-end",
        marginTop: 10,
        marginRight: 14,
    },
    menu: {
        borderColor: "#EEEEEE",
        borderTopWidth: 6,
        backgroundColor: "#fff",
        paddingHorizontal: 15,
    },
    menuItem: {},
    buttonGroup: {
        justifyContent: "space-around",
        paddingVertical: 20,
        flexDirection: "row",
    },
});


export default function AutomaticScreen({ navigation }) {
    const { httpPost, httpGet } = useModel("httpModel", true);
    const { userId } = useModel("userModel");
    const { success } = useModel("loadingModel");
    const {
        automaticText1,
        automaticText2,
        automaticText3,
        automaticText4,
        save,
        cancel,
        successText,
    } = useModel("wordsModel");

    const [goodContent, setGoodContent] = React.useState("");
    const [badContent, setBadContent] = React.useState("");
    const [id, setId] = React.useState("");

    function refreshEvent() {
        return httpGet("/automaticResponse/my").then(res => {
            if (res) {
                setGoodContent(res.goodContent || "");
                setBadContent(res.badContent || "");
                setId(res.id || "");
            }
        });
    }

    function submit() {
        httpPost(
            "/automaticResponse/save",
            {
                id,
                userId,
                goodContent,
                badContent,
            },
            { body: "json" },
            true
        ).then(() => {
            success(save + successText);
            navigation.goBack();
        });
    }

    const canSub = React.useMemo(() => {
        if (goodContent || badContent) {
            return true;
        } 
            return false;
        
    }, [goodContent, badContent]);

    return (
      <>
        <NavHeaderBar title={automaticText1} />
        <ScrollPage
          enabledFresh
          refreshEvent={refreshEvent}
          statusType='primary'
        >
          <Layout style={styles.lay}>
            <Text style={styles.text}>{automaticText2}</Text>
            <Textarea
              containerStyle={styles.textareaContainer}
              style={styles.textarea}
              onChangeText={setGoodContent}
              value={goodContent}
              maxLength={100}
              placeholder={automaticText4}
              placeholderTextColor="#B4B4B4"
              underlineColorAndroid="transparent"
            />
          </Layout>

          <Layout style={styles.lay}>
            <Text style={styles.text}>{automaticText3}</Text>
            <Textarea
              containerStyle={styles.textareaContainer}
              style={styles.textarea}
              onChangeText={setBadContent}
              value={badContent}
              maxLength={100}
              placeholder={automaticText4}
              placeholderTextColor="#B4B4B4"
              underlineColorAndroid="transparent"
            />
          </Layout>

          <View style={styles.buttonGroup}>
            <Button
              status='basic'
              appearance='outline'
              onPress={() => {
                            navigation.goBack();
                        }}
            >
              {cancel}
            </Button>
            <Button
              disabled={!canSub}
              appearance='filled'
              onPress={submit}
            >
              {save}
            </Button>
          </View>
        </ScrollPage>
      </>
    );
}