import { Ionicons } from "@expo/vector-icons";
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet, Text, View, Button, Picker } from "react-native";
import { RectButton, ScrollView } from "react-native-gesture-handler";
import axios from "axios";
import { useFocusEffect } from "@react-navigation/native";

export default function LinksScreen() {
    const [token, setToken] = React.useState("");
    const [error, setError] = React.useState("");
    const [check, changeCheck] = React.useState(true);
    const [order, setOrder] = React.useState(0);
    const [selectOrderId, changeOrder] = React.useState(0);

    React.useEffect(() => {
        if (token) {
            console.log(token);
            axiosInstance.get("/orderInfo/all").then((res) => {
                console.log(res.content);
                setOrder(res.content);
            });
        }
    }, [token, check]);

    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]);

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

    const OrderInfos = () => {
        return order.map((item) => (
            <Picker.Item
                label={
                    "订单id:" +
                    item.id +
                    "---用户id:" +
                    item.userId +
                    "商家id:" +
                    item.merchantId
                }
                value={item.id}
                key={item.id}
            />
        ));
    };

    return (
        <View style={styles.container}>
            {order.length > 0 && (
                <Picker
                    selectedValue={selectOrderId}
                    style={{ height: 50, width: 200 }}
                    onValueChange={(itemValue, itemIndex) =>
                        changeOrder(itemValue)
                    }
                >
                    {OrderInfos()}
                </Picker>
            )}
            {/* {selectOrderId != 0 && <Button title='接单' onPress={() => {}} />} */}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fafafa",
        alignItems: "center",
        justifyContent: "space-around",
    },
    contentContainer: {
        paddingTop: 15,
    },
    optionIconContainer: {
        marginRight: 12,
    },
    option: {
        backgroundColor: "#fdfdfd",
        paddingHorizontal: 15,
        paddingVertical: 15,
        borderWidth: StyleSheet.hairlineWidth,
        borderBottomWidth: 0,
        borderColor: "#ededed",
    },
    lastOption: {
        borderBottomWidth: StyleSheet.hairlineWidth,
    },
    optionText: {
        fontSize: 15,
        alignSelf: "flex-start",
        marginTop: 1,
    },
});