aswi2023one-team-to-rule-them-all-gitlab/src/components/item/ItemTabBar.tsx @ fb120216

import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast, Divider } from "native-base";
import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
import { Certainty, Concordance } from "../../types/item";
import LoadingBox from "../loading/LoadingBox";
import { DrawerNavigationProp } from "@react-navigation/drawer";
import { RootStackParamList } from "../../pages/Navigation";
import { InfoToast } from "../toast/InfoToast";

// custom render Tab
const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any, onBackPressed: any, navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>, nextItem?: string | boolean, prevItem?: string | boolean }) => {

    const { concordances, onIndexChange, index, onBackPressed, nextItem, prevItem } = props

    const toast = useToast();

    console.log(concordances)

    if (concordances && concordances.length > 0) {
        return (
            <VStack>
                {/* <HStack h="16" >
                    <HStack width="50%">
                        <Button variant="ghost" size="lg" marginLeft={0}
                            onPress={onBackPressed}
                            leftIcon={<ChevronLeftIcon size="lg" />}>
                            Back
                        </Button>
                    </HStack>
                    <HStack width="50%">
                        <HStack width="50%">

                        </HStack>
                        <HStack marginRight={0}>
                            <Button variant="ghost" size="lg"
                                onPress={() => {
                                    if(prevItem){
                                        console.log(prevItem)
                                        props.navigation.navigate("Item", { itemId: prevItem.toString() })
                                    }
                                    else{
                                        toast.show({
                                            render: ({
                                                id
                                            }) => {
                                                return <InfoToast text={"No previous item..."} onClose={() => toast.close(id)} />;
                                            },
                                            duration: 3000
                                        });
                                    }
                                }}
                                leftIcon={<ChevronLeftIcon size="lg" />}>
                            </Button>
                            <Button variant="ghost" size="lg"
                                onPress={() => {
                                    
                                    if(nextItem){
                                        props.navigation.navigate("Item", { itemId: nextItem.toString() })
                                    }
                                    else{
                                        toast.show({
                                            render: ({
                                                id
                                            }) => {
                                                return <InfoToast text={"No next item..."} onClose={() => toast.close(id)} />;
                                            },
                                            duration: 3000
                                        });
                                    }
                                }}
                                leftIcon={<ChevronRightIcon size="lg" />}>
                            </Button>
                        </HStack>
                    </HStack>
                </HStack> */}
                <View height={16} backgroundColor={"#F5F4F1"}>
                    <ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
                        {props.navigationState.routes.length > 1 ? (
                            <HStack borderBottomWidth={1} flex="1" borderColor="light.400">
                                {props.navigationState.routes.map((route, i) => {
                                    return (
                                        <Pressable onPress={() => { onIndexChange(i) }} width="100%">
                                        <VStack alignItems={"center"} >
                                            <HStack alignItems={"center"} width={32}>
                                                <CircleIcon
                                                    size="2"
                                                    color={CertaintyWithColors[concordances[i]?.cert ?? Certainty.Unknown].color}
                                                />
                                                <Text marginLeft={1}>
                                                    <Text bold>{concordances[i]?.id}</Text>
                                                </Text>
                                            </HStack>
                                            {i == index && <Divider color="primary" borderWidth={1} width={30} mt={2} />}
                                        </VStack>
        
                                    </Pressable>
                                    );
                                })}
                            </HStack>
                        ) : (
                            // One item only


                            <Pressable onPress={() => { onIndexChange(0) }} width="100%">
                                <VStack alignItems={"center"} >
                                    <HStack alignItems={"center"} width="100%">
                                        <CircleIcon
                                            size="2"
                                            color={CertaintyWithColors[concordances[0]?.cert ?? Certainty.Unknown].color}
                                        />
                                        <Text marginLeft={1}>
                                            <Text bold>{concordances[0]?.id}</Text>
                                        </Text>
                                    </HStack>
                                    <Divider color="primary" borderWidth={1} width={30} mt={2} />
                                </VStack>

                            </Pressable>
                        )}
                    </ScrollView>
                </View>
            </VStack>

        );
    }
    else {
        return <LoadingBox text={`Loading concordances...`}></LoadingBox>
    }
};

export default ItemTabBar