aswi2023one-team-to-rule-them-all-gitlab/src/components/item/ItemView.tsx @ 1054fe09

import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer } from "native-base"
import React from "react"
import { Item } from "../../types/item"
import { Note } from "../../types/note"
import LoadingBox from "../loading/LoadingBox"

interface ItemDetailProps {
    item: Item,
    itemLoading: boolean,
    notes: Note[],
    notesLoading: boolean
}


const ItemDetail = (props: { item: Item }) => {
    const item = props.item;

    return (
        <View alignItems="center" flex="1" justifyContent="center">
            {
                item && (
                    <ScrollView>
                        <VStack>
                            <Text>id: {item.id}</Text>
                            <Text>name: {item.workName}</Text>
                            {
                                item.fullView && item.imageUrl && (
                                    <Image size={250} alt="image" source={{ uri: `http:147.228.173.159/static/images/${item.imageUrl}` }} />
                                )
                            }
                        </VStack>
                    </ScrollView>

                )
            }
        </View>
    );
}

const ItemNotes = (props: { notes: Note[] }) => {
    const notes = props.notes;
    return (
        <Center>
            {
                notes && notes.length > 0 ? (
                    <VStack>
                        {notes.map((note, index) => (
                            <Box key={index}>
                                <Text>{note.username}</Text>
                                <Text>{note.note}</Text>
                            </Box>
                        ))}
                    </VStack>
                ) : (
                    <Text>There are no notes for selected item.</Text>
                )
            }
        </Center>
    );
}


const ItemView = (props: ItemDetailProps) => {

    // item shown / note shown
    const [itemShown, setItemShown] = React.useState(true);

    const {itemLoading, notesLoading} = props;

    const handleItemClick = () => {
        setItemShown(true);
    }

    const handleNotesClick = () => {
        setItemShown(false);
    }

    return (
        <Box display="flex" flex={1} flexDirection="column" justifyContent="space-between">
            {itemShown ? (
                itemLoading ? 
                <LoadingBox text="Item loading"/>
                :
                <ItemDetail item={props.item} />
            ) : (
                notesLoading ? 
                <LoadingBox text="Notes loading"/>
                :
                <ItemNotes notes={props.notes} />
            )}

            {/* item notes switch tab */}
            <HStack alignItems="center">
                <Button 
                    variant={itemShown ? "subtle" : "outline"}
                    w="50%"
                    onPress={handleItemClick}
                >
                    Item
                </Button>
                <Button 
                    variant={itemShown ? "outline" : "subtle"}
                    w="50%"
                    onPress={handleNotesClick}
                >
                    Notes
                </Button>
            </HStack>
        </Box>
    )
}

export default ItemView