import {StyleSheet, View} from "react-native";
import OrderCard from "../../components/OrderCard/OrderCard";
import {RFPercentage} from "react-native-responsive-fontsize";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import SortingButton from "../../components/SortingButton/SortingButton";
import {useDispatch} from "react-redux";
import {useEffect, useRef, useState} from "react";
import {Order} from "../../types/order";
import {FlashList} from "@shopify/flash-list";
import SortingModal, {
    SortingModalHandles
} from "../../components/Modals/SortingModal/SortingModal";
import flashListSeparator from "../../components/FlashListSeparator/FlashListSeparator";
import {setOrder} from "../../features/assembly/assemblySlice";
import {NavigationProp, useNavigation} from "@react-navigation/native";
import {TabNavigatorParamList} from "../MainScreen/MainScreen";
import useOrders from "../OrderScreen/useOrders";
import {nextPage, openOrdersFilterModal} from "../../features/ordersFilter/ordersFilterSlice";
import DTitle from "../../components/DTitle/DTitle";

function OrdersScreen() {
    const dispatch = useDispatch();
    const navigator = useNavigation<NavigationProp<TabNavigatorParamList, 'Home'>>();
    const {refresh, isRefreshing, orders} = useOrders();

    return (
        <View style={styles.container}>

            <View style={styles.sortingButtonWrapper}>
                <SortingButton onPress={() => {
                    dispatch(openOrdersFilterModal());
                }}/>
            </View>
            <View style={styles.content}>
                <FlashList onRefresh={refresh}
                           refreshing={isRefreshing}
                           keyboardShouldPersistTaps={"never"}
                           data={orders}
                           keyExtractor={(item: Order) => item.databaseId.toString()}
                           renderItem={({item}) =>
                               <OrderCard onSelect={(order) => {
                                   dispatch(setOrder(order));
                                   navigator.navigate("Home");
                               }} order={item}/>}
                           showsHorizontalScrollIndicator={false}
                           showsVerticalScrollIndicator={true}
                           onEndReachedThreshold={0.5}
                           estimatedItemSize={720}
                           onEndReached={() => {
                               if (!orders.length) return;
                               dispatch(nextPage());
                           }}
                           ItemSeparatorComponent={flashListSeparator}

                />
                {orders.length <= 0 &&
                    <DTitle style={{flex: 1, textAlign: "center"}}>Нет заказов по заданному фильтру</DTitle>
                }

            </View>

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: "100%",
        height: "100%",
        display: "flex",
        paddingHorizontal: responsiveWidth(5),
        rowGap: responsiveHeight(2),
        fontWeight: '500'
    },
    content: {
        flex: 1,
    },
    scrollContainer: {
        rowGap: responsiveHeight(2),
    },
    radioButtonContainer: {
        flexDirection: "row",
        alignItems: 'center',
    },
    sortingButtonWrapper: {},
    sortingModalContainer: {
        width: "100%",
        height: "100%",
        flex: 1,
        padding: RFPercentage(3),
        flexDirection: "column",
    },
    sortingModalButton: {
        paddingHorizontal: responsiveWidth(30),
        marginTop: "auto"
    }
});

export default OrdersScreen;