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

import {
    Center,
    Box,
    VStack,
    Button,
    HStack,
    Text,
    Image,
    ScrollView,
    View,
    Spacer,
    Card,
    Heading,
    Switch,
    Flex,
    ChevronLeftIcon,
    ChevronRightIcon,
    Divider,
    Pressable,
    CircleIcon,
    IconButton,
    KeyboardAvoidingView,
    useToast
} from "native-base"
import React, { useCallback, useEffect, useState } from "react"
import { Certainty, Item, RelationshipType } from "../../types/item"
import { Note } from "../../types/note"
import LoadingBox from "../loading/LoadingBox"
import NotesListView from "../notes/NotesListView"
import { IMAGE_URL } from "../../api/constants"
import { log } from "../../logging/logger"
import { createNote, getAllNotes } from "../../stores/actions/notesThunks"
import { AppDispatch, RootState } from "../../stores/store"
import { useDispatch, useSelector } from "react-redux"
import { getItemNotes } from "../../stores/actions/itemThunks"

import {Dimensions, Platform} from "react-native";
import { DrawerNavigationProp } from "@react-navigation/drawer"
import { RootStackParamList } from "../../pages/Navigation"
import { CertaintyWithColors } from "../../stores/reducers/itemSlice"
import { LeftArrowIcon, RightArrowIcon } from "../general/Icons"
import RenderHTML from "react-native-render-html"
import { ZoomableImage } from "./ZoomableImage"
import { InfoToast } from "../toast/InfoToast"

interface ItemDetailProps {
    item: Item,
    itemLoading: boolean,
    notes: Note[],
    notesLoading: boolean,
    navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>
}

const ItemDetail = (props: ItemDetailProps) => {
    const item = props.item;
    const toast = useToast();
    const [selectedImage, setSelectedImage] = useState<number>(0);

    const [images, setImages] = useState<{ imageUrl: string, title: string }[]>([]);


    useEffect(() => {
        if (item.images?.[0]) {
            setImages([item.images[0], item.images[0], item.images[0], item.images[0], item.images[0], item.images[0], item.images[0]])
        }
    }, [item])

    return (<>
        {
            item && props.itemLoading ?
                (<LoadingBox text="Item loading..." />)
                :
                (
                    <ScrollView flex="1" paddingLeft={2.5} paddingRight={2.5} marginTop={2.5}>

                        <VStack>

                            <VStack flex={1} marginTop={3.5} marginLeft={1.5} >
                                <HStack alignItems="center" height="auto">
                                    <Text fontSize={13} color="#4D4D4D" fontWeight={"light"}>
                                        {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                                    </Text>
                                    <HStack marginRight={0} marginLeft="auto" width={70}>
                                        <Button disabled={!item.prevItem} padding={1} marginLeft="auto" variant="ghost" size="xs"
                                            onPress={() => {
                                                if (item.prevItem) {
                                                    console.log(item.prevItem)
                                                    props.navigation.navigate("Item", { itemId: item.prevItem.toString() })
                                                }
                                                else {
                                                    toast.show({
                                                        render: ({
                                                            id
                                                        }) => {
                                                            return <InfoToast text={"No previous item..."} onClose={() => toast.close(id)} />;
                                                        },
                                                        duration: 3000
                                                    });
                                                }
                                            }}
                                            leftIcon={<ChevronLeftIcon size="md" />}>
                                        </Button>
                                        <Button disabled={!item.nextItem}  marginLeft="auto" padding={1} marginRight={2.5} variant="ghost" size="xs"
                                            onPress={() => {

                                                if (item.nextItem) {
                                                    props.navigation.navigate("Item", { itemId: item.nextItem.toString() })
                                                }
                                                else {
                                                    toast.show({
                                                        render: ({
                                                            //@ts-ignore
                                                            id
                                                        }) => {
                                                            return <InfoToast text={"No next item..."} onClose={() => toast.close(id)} />;
                                                        },
                                                        duration: 3000
                                                    });
                                                }
                                            }}
                                            leftIcon={<ChevronRightIcon size="md" />}>
                                        </Button>
                                    </HStack>
                                </HStack>
                                <HStack alignItems="center" height="auto" marginTop={1}>
                                    <Heading marginBottom="auto" fontSize={18} color="#4D4D4D">
                                        {item.workName}
                                    </Heading>
                                    <Button marginLeft="auto" marginTop="auto" marginRight={2.5} variant="outline" backgroundColor={"secondary.500"} borderRadius={8} size="sm" padding={0.5} paddingLeft={2} paddingRight={2} >
                                        <Text color="primary.500" fontSize={12}>
                                            {item?.concordances?.[0]?.id}
                                        </Text>
                                    </Button>
                                </HStack>
                            </VStack>

                            <View marginTop={5} backgroundColor="primary.100" borderRadius={10} borderColor="primary.100" padding={2}>
                                {item.inventoryItem &&
                                    <VStack>
                                        <Text >
                                            <Text color="primary.500" italic fontWeight={"semibold"}>Inventory item: </Text>
                                            {item.inventoryItem}
                                        </Text>
                                        <Text marginTop="2">
                                            {item.searchSubjects != undefined && item?.searchSubjects?.map((subject, index) => (
                                                subject != "" ?
                                                    item.searchSubjects && index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
                                                    :
                                                    ""
                                            ))}
                                        </Text>
                                    </VStack>}
                            </View>
                            {item.fullView && item.images && item.images.length > 0 && (
                                <VStack marginTop={5} alignItems="center" justifyContent="center" backgroundColor="primary.100" borderRadius={10} borderColor="primary.100" padding={0}>

                                    <Box style={{ backgroundColor: item.images[selectedImage].relationship_type != RelationshipType.IdentifiedArtwork ? "#B3B3B3" : CertaintyWithColors[item.images[selectedImage].cert ?? Certainty.Unknown].color }}
                                        marginTop={0} width={Dimensions.get('window').width - 20} alignItems="center" borderTopRadius={10} >
                                        <Text marginBottom={2}>

                                            {item.images[selectedImage].relationship_type == RelationshipType.Resembling && "Resembling object"}
                                            {item.images[selectedImage].relationship_type == RelationshipType.IdentifiedArtwork && "Identified artwork"}
                                            {item.images[selectedImage].relationship_type == RelationshipType.Related && "Related item"}

                                            {item.images[selectedImage].relationship_type == RelationshipType.IdentifiedArtwork && item.images[selectedImage].cert && item.images[selectedImage].cert != Certainty.Unknown && ` - ${item.images?.[selectedImage].cert}`}
                                        </Text>
                                    </Box>

                                    <HStack style={{ alignItems: "center", marginTop: 5 }}>
                                        <IconButton variant="ghost" style={{ height: 30, width: 30, borderRadius: 15 }} onPress={() => {
                                            if (item.images && selectedImage - 1 >= 0) {
                                                setSelectedImage(selectedImage - 1);
                                            }
                                        }} icon={<LeftArrowIcon color="#49454F" />} />

                                        <ZoomableImage fullScreen={false} size={Dimensions.get('window').width - 110} imageUri={IMAGE_URL + "/" + item.images[selectedImage].imageUrl} />

                                        <IconButton variant="ghost" style={{ height: 30, width: 30, borderRadius: 15 }} onPress={() => {
                                            if (item.images && selectedImage + 1 < item.images.length) {
                                                setSelectedImage(selectedImage + 1);
                                            }
                                        }} icon={<RightArrowIcon color="#49454F" />} />
                                    </HStack>
                                    <ScrollView horizontal marginBottom={2.5} marginTop={5}>

                                        {item.images.map((image, index) => (
                                            <Pressable
                                                onPress={() => { setSelectedImage(index); }}>
                                                <Image marginLeft={2.5} size={90} alt="image" source={{ uri: IMAGE_URL + "/" + image.imageUrl }}
                                                    borderColor={selectedImage == index ? "#1782FF" : undefined}
                                                    borderWidth={3}
                                                    resizeMode={"contain"}
                                                />
                                            </Pressable>

                                        ))}
                                    </ScrollView>
                                </VStack>
                            )}
                            {item.fullView && (
                                <View marginTop={5} backgroundColor="primary.100" borderRadius={10} borderColor="primary.100" padding={2} marginBottom={5}>
                                    {item.authorName &&
                                        <HStack>
                                            <Text marginTop={2.5}>
                                                <Text color="primary.500" italic fontWeight={"semibold"}>Author name: </Text>
                                                {item.images?.[selectedImage]?.author}
                                            </Text>
                                        </HStack>}
                                    {item.title &&
                                        <HStack>
                                            <Text marginTop={2.5}>
                                                <Text color="primary.500" italic fontWeight={"semibold"}>Title: </Text>
                                                {item.images?.[selectedImage].title}
                                            </Text>
                                        </HStack>}
                                    {item.institution &&
                                        <HStack>
                                            <Text marginTop={2.5}>
                                                <Text color="primary.500" italic fontWeight={"semibold"}>Institution: </Text>
                                                {item.images?.[selectedImage].institution.name && `${item.images?.[selectedImage].institution.name}`}
                                                {item.images?.[selectedImage].institution.inventoryNumber && `, Inv. No. ${item.images?.[selectedImage].institution.inventoryNumber}`}
                                                {item.images?.[selectedImage].institution.city && `, ${item.images?.[selectedImage].institution.city}`}
                                                {item.images?.[selectedImage].institution.country && ` (${item.images?.[selectedImage].institution.country})`}
                                            </Text>
                                        </HStack>}
                                    {item.repository &&
                                        <HStack>
                                            <Text marginTop={2.5}>
                                                <Text color="primary.500" italic fontWeight={"semibold"}>Repository: </Text>
                                                {item.images?.[selectedImage].repository}
                                            </Text>
                                        </HStack>}
                                    {item.images?.[selectedImage].provenance &&
                                        <HStack>
                                            <Text marginTop={2.5}>
                                                <Text color="primary.500" italic fontWeight={"semibold"}>Provenance: </Text>
                                                {item.images?.[selectedImage].provenance}
                                            </Text>
                                        </HStack>}
                                    {item.images?.[selectedImage].description &&
                                        <VStack>
                                            <Text marginTop={2.5} color="primary.500" italic fontWeight={"semibold"}>
                                                Description:
                                            </Text>
                                            <RenderHTML source={{html: item.images?.[selectedImage].description}} />
                                        </VStack>}
                                </View>)}

                            {
                                item.room && item.room.id &&
                                <Flex direction="row" alignItems="center" justify="flex-end">
                                    <Button
                                        onPress={() => props.navigation.navigate("Plan", { roomId: item?.room?.id, placeId: undefined })}
                                        variant={"link"}
                                        backgroundColor={"secondary.500"}
                                        borderRadius={7}
                                        marginTop={0}
                                        marginBottom={5}
                                        width={125}
                                        rightIcon={<ChevronRightIcon size="xs" />}>
                                        Show in map
                                    </Button>
                                </Flex>

                            }

                        </VStack>
                    </ScrollView >
                )
        }</>
    );
}



const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined> }) => {

    const [showRelatedComments, setShowRelatedComments] = useState(true);

    const { requestPending, triggerRefresh } = useSelector((state: RootState) => state.noteViewState)

    const dispatch = useDispatch<AppDispatch>();

    // trigger refresh on triggerRefresh increment
    useEffect(() => {
        if (triggerRefresh > 0) {
            log.debug("NotesViewPage", "useEffect", "getNotes");
            dispatch(getItemNotes({ item: props.item, relatedComments: showRelatedComments }));
        }
    }, [triggerRefresh])

    const toggleRelatedComments = useCallback(() => {
        if (!props.notesLoading) {

            let value = !showRelatedComments;

            setShowRelatedComments(value);
            dispatch(getItemNotes({ item: props.item, relatedComments: value }));
        }
    }, [showRelatedComments]);


    const handleCreateItemComment = useCallback(
        (newComment: string, replyingTo: { messageId: string; userName: string } | null) => {
            if (!requestPending) {
                // creating new comment
                if (replyingTo != null) {
                    dispatch(createNote({ newNote: { note: newComment, reply_to: replyingTo.messageId } as Note }));
                } else {
                    dispatch(createNote({ newNote: { note: newComment, items: props.item.id } as any }));
                }
            }
        },
        [props.item.id]
    );

    return (

        props.notesLoading ?
            (<LoadingBox text="Notes loading..." />)
            :
            (<KeyboardAvoidingView
                behavior={Platform.OS === "ios" ? "padding" : "height"}
                keyboardVerticalOffset={Platform.OS === "ios" ? 140 : 130}
                style={{ flex: 1 }}

            >
                <VStack flex={1}>
                <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={2.5} marginLeft={2.5} marginRight={2.5}>
                    <Text fontWeight="semibold" mt={4} ml={2} fontSize="md" color="#4D4D4D">Show related comments</Text>
                    <Switch value={showRelatedComments} onChange={toggleRelatedComments} size="lg" marginRight={2} />
                </Flex>
                <Box flex={1}>
                    <NotesListView requestPending={requestPending} notes={props.notes} navigation={props.navigation} handleCreateComment={handleCreateItemComment} />
                </Box>
            </VStack>
            </KeyboardAvoidingView>)
    );
}



const ItemView = (props: ItemDetailProps) => {

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

    const { itemLoading, notesLoading, navigation } = props;

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

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

    return (
        <Box>

            <Box height={Dimensions.get('window').height - 205}>
                {itemShown ? (
                    <ItemDetail itemLoading={props.itemLoading} item={props.item} notesLoading={props.notesLoading} notes={props.notes} navigation={props.navigation} />
                ) : (
                    <ItemNotes item={props.item} notesLoading={props.notesLoading} notes={props.notes} navigation={props.navigation} />
                )}
            </Box>

            {/* item notes switch tab */}
            <HStack alignItems="center">
                <Button
                    variant={"unstyled"}
                    w="50%"
                    onPress={handleItemClick}
                >
                    <VStack alignItems={"center"}>
                        <Text fontSize="md" color="primary" bold={itemShown} mb={itemShown ? undefined : 2}>
                            Detail
                        </Text>
                        {itemShown && <Divider borderRadius={5} borderWidth={1} width={70} mt={1.5} color="primary" />}
                    </VStack>
                </Button>
                <Button
                    variant={"unstyled"}
                    w="50%"
                    onPress={handleNotesClick}
                >
                    <VStack alignItems={"center"}>
                        <Text fontSize="md" color="primary" bold={!itemShown} mb={!itemShown ? undefined : 2}>
                            Notes
                        </Text>
                        {!itemShown && <Divider borderRadius={5} borderWidth={1} width={70} mt={1.5} color="primary" />}
                    </VStack>
                </Button>
            </HStack>
        </Box>
    )
}

export default ItemView