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

import { HStack, CircleIcon, ScrollView, Pressable, Text, VStack, 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 (
            /*
            NEXT ITEM switching
            
            <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> */
            <HStack h="16" backgroundColor={"primary.100"}>
                <ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
                    {concordances && concordances.length > 0 &&
                        <HStack flex="1" justifyContent="center" width="100%">
                            {concordances.length > 1 && concordances.map((concordance, i) => {
                                return (
                                    <Pressable onPress={() => { onIndexChange(i) }}>
                                        <VStack alignItems={"center"} justifyContent={"center"} width={32} height={16}>
                                            <HStack alignItems={"center"} mt={i == index ? 4 : -1.5}>
                                                {concordances?.[i]?.cert && <CircleIcon
                                                    size="2"
                                                    color={CertaintyWithColors[concordances?.[i]?.cert ?? Certainty.Unknown].color}
                                                />}
                                                <Text marginLeft={2} color={i == index ? "primary.500" : "primary.300"} bold fontSize={"md"}>
                                                    {concordances?.[i]?.id}
                                                </Text>
                                            </HStack>
                                            {i == index && <Divider outlineColor={"primary.500"} borderWidth={2} borderRadius={5} width={85} mt={5} />}
                                        </VStack>

                                    </Pressable>
                                );
                            })}
                            {concordances && concordances.length == 1 &&
                                <Pressable onPress={() => { onIndexChange(0) }}>
                                    <VStack alignItems={"center"} justifyContent={"center"} width={32} height={16}>
                                        <HStack alignItems={"center"} mt={0 == 0 ? 4 : -1.5}>
                                            {concordances?.[0]?.cert && <CircleIcon
                                                size="2"
                                                color={CertaintyWithColors[concordances?.[0]?.cert ?? Certainty.Unknown].color}
                                            />}
                                            <Text marginLeft={2} color={"primary.500"} bold fontSize={"md"}>
                                                {concordances?.[0]?.id}
                                            </Text>
                                        </HStack>
                                        {0 == 0 && <Divider color="primary.500" borderWidth={2} borderRadius={5} width={85} mt={5} />}
                                    </VStack>

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

export default ItemTabBar