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

import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast } 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();

    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 h="8">
                    <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 key={i} onPress={() => { onIndexChange(i) }}>
                                            <HStack alignItems={"center"} width="32" borderColor="light.400" height="100%" borderBottomWidth={i == index ? 2 : 0}>
                                                <CircleIcon
                                                    marginLeft="5"
                                                    size="2"
                                                    color={CertaintyWithColors[concordances[i]?.cert ?? Certainty.Unknown].color}
                                                />
                                                <Text marginLeft="5%">
                                                    {i == index ? <Text bold>{concordances[i]?.id}</Text> : concordances[i]?.id}

                                                </Text>
                                            </HStack>
                                        </Pressable>
                                    );
                                })}
                            </HStack>
                        ) : (
                            // One item only
                            <Pressable onPress={() => { onIndexChange(0) }} width="100%">
                                            <HStack alignItems={"center"} width="100%" borderColor="light.400" height="100%" borderBottomWidth={2}>
                                                <CircleIcon
                                                    marginLeft="42%"
                                                    size="2"
                                                    color={CertaintyWithColors[concordances[0]?.cert ?? Certainty.Unknown].color}
                                                />
                                                <Text marginLeft="2%">
                                                    <Text bold>{concordances[0]?.id}</Text>
                                                </Text>
                                            </HStack>
                                        </Pressable>
                        )}
                    </ScrollView>
                </View>
            </VStack>

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

export default ItemTabBar