import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    Platform,
    StyleSheet,
    Button,
    View,
    Picker,
    Alert,
    Text,
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";

import { MonoText } from "../components/StyledText";
import { useFocusEffect } from "@react-navigation/native";
import axios from "axios";

export default function HomeScreen() {
    const [token, setToken] = React.useState("");
    const [goods, setGoods] = React.useState([]);
    const [cartId, setCartId] = React.useState(0);
    const [selectId, changeSelect] = React.useState(45);
    const [selectGoodsId, changeGoods] = React.useState(0);
    const [error, setError] = React.useState("");
    const [check, changeCheck] = React.useState(true);
    const [orderId, setOrderId] = React.useState(0);

    const axiosInstance = React.useMemo(() => {
        let axiosInstance = axios.create({
            baseURL: "http://dingdong.izouma.com",
        });

        axiosInstance.interceptors.request.use(
            config => {
                config.headers = config.headers || {};
                if (token) {
                    config.headers["Authorization"] = "Bearer " + token;
                }
                return config;
            },
            error => {
                return Promise.reject(error);
            }
        );

        axiosInstance.interceptors.response.use(
            response => {
                setError("");
                return response.data;
            },
            error => {
                setError(error.response.data.error);
                return Promise.reject(error.response.data);
            }
        );
        return axiosInstance;
    }, [token]);

    const chooseGoods = React.useMemo(() => {
        if (selectGoodsId) {
            return goods.find(item => {
                return item.id == selectGoodsId;
            });
        } else {
            return {};
        }
    }, [selectGoodsId, goods]);

    useFocusEffect(
        React.useCallback(() => {
            var data = new FormData();
            data.append("username", "123");
            data.append("password", "123");
            axiosInstance
                .post("/auth/login", data, {
                    withCredentials: true,
                })
                .then(res => {
                    setToken(res);
                });
        }, [])
    );

    const GoodsInfos = () => {
        return goods.map(item => (
            <Picker.Item
                label={item.name + "-" + item.merchantId}
                value={item.id}
                key={item.id}
            />
        ));
    };

     

    React.useEffect(() => {
        if (token) {
            console.log(token);
            axiosInstance
                .get("/goods/all?size=999&sort=id,desc")
                .then(res => {
                    console.log(res.content);
                    setGoods(res.content);
                });
        }
    }, [token, check]);

    return (
        <View style={styles.container}>
            {error != "" && <Text>错误提示：{error}</Text>}

            {goods.length > 0 && (
                <Picker
                    selectedValue={selectGoodsId}
                    style={{ height: 50, width: 150 }}
                    onValueChange={(itemValue, itemIndex) =>
                        changeGoods(itemValue)
                    }
                >
                    {GoodsInfos()}
                </Picker>
            )}

            {chooseGoods.status != "PASS" && selectGoodsId != 0 && (
                <Button
                    title='审核通过'
                    onPress={() => {
                        axiosInstance
                            .get(
                                "/goods/audit?id=" +
                                    selectGoodsId +
                                    "&pass=true"
                            )
                            .then(res => {
                                changeCheck(!check);
                            });
                    }}
                    style={styles.btn}
                />
            )}

            {chooseGoods.id && (
                <Button
                    title='加购'
                    onPress={() => {
                        var data = new FormData();
                        data.append("goodsId", selectGoodsId);
                        data.append("goodsSpecificationIds", "");
                        data.append("num", 1);
                        axiosInstance
                            .post("/shoppingCart/cart", data, {
                                withCredentials: true,
                            })
                            .then(res => {
                                setCartId(res.id);
                            });
                    }}
                    style={styles.btn}
                />
            )}
            {cartId != 0 && (
                <Button
                    title='下单'
                    onPress={() => {
                        var data = new FormData();
                        data.append("shoppingCartId", cartId);
                        data.append("addressId", 134);
                        axiosInstance
                            .post("/orderInfo/order", data, {
                                withCredentials: true,
                            })
                            .then(res => {
                                setOrderId(res.id);
                            });
                    }}
                    style={styles.btn}
                />
            )}

            {orderId != 0 && <Text>生成订单成功，订单id为:{orderId}</Text>}
        </View>
    );
}

HomeScreen.navigationOptions = {
    header: null,
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fafafa",
        alignItems: "center",
        justifyContent: "space-around",
    },
    btn: {
        marginHorizontal: 10,
        marginVertical: 10,
    },
});