import {Button, StyleSheet, Text, View} from "react-native";
import {RootState, useAppDispatch} from "../../redux/store";
import * as process from "process";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import SearchBar from "../../components/SearchBar/SearchBar";
import {useDispatch, useSelector} from "react-redux";
import {NavigationProp, useFocusEffect, useNavigation, useNavigationState} from "@react-navigation/native";
import {TabNavigatorParamList} from "../MainScreen/MainScreen";
import {FlashList} from "@shopify/flash-list";
import {Order} from "../../types/order";
import OrderCard from "../../components/OrderCard/OrderCard";
import {setOrder} from "../../features/assembly/assemblySlice";
import flashListSeparator from "../../components/FlashListSeparator/FlashListSeparator";
import {useEffect, useState} from "react";
import {openScanModal} from "../../features/scanModal/scanModalSlice";
import ordersApi from "../../api/ordersApi";
import DTitle from "../../components/DTitle/DTitle";
import {useNormalizedSnapPoints} from "@gorhom/bottom-sheet/lib/typescript/hooks";
import SortingButton from "../../components/SortingButton/SortingButton";
import useBarcodeOrders from "./useBarcodeOrders";
import {openOrdersFilterModal} from "../../features/ordersFilter/ordersFilterSlice";

function BarcodeScreen() {
    const dispatch = useDispatch();
    const [productId, setProductId] = useState(-1);
    const {orders, isUpdating} = useBarcodeOrders({productId});

    const isScanModalVisible = useSelector((state: RootState) => state.scanModal.isVisible);
    const navigator = useNavigation<NavigationProp<TabNavigatorParamList, 'Home'>>();
    const navigationState = useNavigationState((state) => state);

    useEffect(() => {
        console.log("state changed")
        if (!navigationState.history) return;
        // @ts-ignore
        let currentTabKey: string = navigationState.history[navigationState.history.length - 1].key;
        if (currentTabKey.startsWith("Barcode")) if (!isScanModalVisible) dispatch(openScanModal());
    }, [navigationState]);
    return (
        <View style={styles.container}>
            <SearchBar onProductSelected={product => {
                setProductId(product.productId);
            }}/>
            <SortingButton onPress={() => {
                dispatch(openOrdersFilterModal());
            }}
            />
            <View style={styles.content}>
                {orders.length > 0 || isUpdating ? <FlashList
                        refreshing={isUpdating}
                        onRefresh={() => {
                        }}
                        keyboardShouldPersistTaps={"never"}
                        data={orders}
                        keyExtractor={(item: Order) => item.orderNumber.toString()}
                        renderItem={({item}) =>
                            <OrderCard onSelect={(order) => {
                                dispatch(setOrder(order));
                                navigator.navigate("Home");
                            }} order={item}/>}
                        showsHorizontalScrollIndicator={false}
                        showsVerticalScrollIndicator={true}
                        onEndReachedThreshold={0.1}
                        estimatedItemSize={720}
                        contentContainerStyle={{
                            paddingBottom: responsiveHeight(10)
                        }}
                        ItemSeparatorComponent={flashListSeparator}
                    /> :
                    <View style={{justifyContent: "center", flex: 1}}>
                        <DTitle style={{
                            textAlign: "center",
                        }}>Нет заказов по данному
                            товару</DTitle>
                    </View>}

            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: "100%",
        height: "100%",
        display: "flex",
        paddingHorizontal: responsiveWidth(5),
        rowGap: responsiveHeight(2),
        fontWeight: '500'
    },
    content: {
        flex: 1,
    },
});
export default BarcodeScreen;