aswi2023one-team-to-rule-them-all-gitlab/src/pages/PlanViewPage.tsx @ 7a3ad946

import React, { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../stores/store"
import LoadingBox from "../components/loading/LoadingBox"
import { log } from "../logging/logger"
import { DrawerScreenProps } from "@react-navigation/drawer"
import { RootDrawerParamList } from "./Navigation"
import { Box, CloseIcon, Select, useToast, Button, Flex, Text, Center, VStack, ScrollView, View, HStack, Divider } from "native-base"
import { ErrorToast } from "../components/toast/ErrorToast"
import { Floor, Place, Room } from "../types/plan"
import { getFloorList, getPlanFloorImage, getPlanInventories, getPlanItems } from "../stores/actions/planThunks"
import { login } from "../stores/actions/userThunks"
import { getPlanItemsRequest } from "../api/planservice"
import ItemPreview from "../components/listView/ItemPreview"
import PlanView from "../components/plan/CastlePlanView"
import { BASE_API_URL } from "../api/constants"
import ListView from "../components/listView/ListView"
import SearchForm from "../components/search/SearchForm"
import { loadItemsByInventory } from "../stores/actions/listViewThunks"
import CastlePlanView from "../components/plan/CastlePlanView"

import { Dimensions } from 'react-native';

const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Plan'>) => {

  const dispatch = useDispatch<AppDispatch>()

  // Route: set selected room / place from 
  useEffect(() => {
    console.log("dispatching get floor list")
    // dispatch(login({username: "Viktorie", password: "Golem123."}))
    dispatch(getFloorList())
  }, [])

  const DEFAULT_FLOOR = "first_floor"

  const [castlePlanShown, setCastlePlanShown] = useState<boolean>(true)

  const [selectedFloor, setSelectedFloor] = useState<Floor | undefined>(undefined)
  const [selectedRoom, setSelectedRoom] = useState<Room | undefined>(undefined)
  const [selectedPlace, setSelectedPlace] = useState<Place | undefined>(undefined)

  const [isInteractingWithCastlePlan, setIsInteractingWithCastlePlan] = useState(false);

  const { floorListLoading, floorList, totalItemsCount, lastError } = useSelector((state: RootState) => state.planViewState)

  const inventories = useSelector((state: RootState) => state.planViewState.itemInventories)
  const inventoriesLoading = useSelector((state: RootState) => state.planViewState.itemInventoriesLoading)

  const numberOfResults = useSelector((state: RootState) => state.planViewState.totalItemsCount)

  const data = useSelector((state: RootState) => state.planViewState.itemList)
  const dataLoading = useSelector((state: RootState) => state.planViewState.itemListLoading)
  const pagination = useSelector((state: RootState) => state.planViewState.itemListPagination)

  const floorMapImage = useSelector((state: RootState) => state.planViewState.mapImage)
  const floorMapImageLoading = useSelector((state: RootState) => state.planViewState.mapImageLoading)

  // todo
  const castlePlanFullScreenMode = false

  const toast = useToast();

  useEffect(() => {
    if (floorList && !selectedFloor) {

      if (route.params && route.params.roomId) {

        selectRoom(route.params.roomId)

        if (route.params.placeId) {
          selectPlace(route.params.placeId)
        }

        // if (!itemListLoading) {
        //   searchSubmit(currentPage, route.params.roomId, route.params.placeId)
        // }
      }
      else {
        selectFloor(DEFAULT_FLOOR)
      }
    }
  }, [floorList, route.params.roomId, route.params.placeId])

  useEffect(() => {
    if (floorList) {
      if (!inventoriesLoading) {
        dispatch(getPlanInventories({ room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
      }
    }
  }, [selectedPlace, selectedRoom])

  useEffect(() => {
    if (selectedFloor) {
      console.log("Dispatching getFloorImage " + selectedFloor.id)
      dispatch(getPlanFloorImage(selectedFloor.id))
    }
  }, [selectedFloor])


  useEffect(() => {
    if (lastError) {
      toast.closeAll()
      toast.show({
        render: ({
          id
        }) => {
          return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
        },
        duration: 3000
      });
    }
  }, [lastError])


  const searchSubmit = (roomId: number, placeId?: number) => {
    log.debug("PlanView", "searchSubmit")

    console.log("searching " + roomId + ", " + placeId)

    dispatch(getPlanInventories({ room: roomId, place: placeId }))
  }

  const selectFloor = (floorId: string) => {
    if (floorId == selectedFloor?.id) {
      return;
    }

    for (let i = 0; i < floorList.length; i++) {
      let floor = floorList[i]
      if (floor.id == floorId) {
        setSelectedFloor(floor)
        setSelectedRoom(undefined)
        setSelectedPlace(undefined)
        return;
      }
    }
  }

  const selectRoom = (roomId: number) => {
    if (roomId == selectedRoom?.id) {
      return;
    }

    for (let i = 0; i < floorList.length; i++) {
      let floor = floorList[i]

      for (let j = 0; j < floor.roomList.length; j++) {
        let room = floor.roomList[j]
        if (room.id == roomId) {
          setSelectedFloor(floor)
          setSelectedRoom(room)
          setSelectedPlace(undefined)
          return;
        }
      }
    }
  }

  const selectPlace = (placeId: number) => {
    if (placeId == selectedPlace?.id) {
      return;
    }

    for (let i = 0; selectedRoom?.places && i < selectedRoom?.places?.length; i++) {
      let place = selectedRoom?.places[i]
      if (place.id == placeId) {
        setSelectedPlace(place)
        return;
      }
    }
  }


  const clearForm = () => {
    log.debug("PlanView", "clearForm")
    setSelectedPlace(undefined)
    setSelectedRoom(undefined)
    selectFloor(DEFAULT_FLOOR)
  }

  const onBackPressed = () => {
    log.debug("back pressed")
    navigation.goBack();
  }

  return (
    <Box flex={1}>
      {!castlePlanFullScreenMode || !castlePlanShown ? (
        <Box h={Dimensions.get('window').height - 55}>
          <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
            <VStack space={1}>

              {/* Selection */}

              {
                floorListLoading ?
                  <LoadingBox text="Floor list loading"></LoadingBox>
                  :
                  <>
                    {/* Floor */}
                    <Select
                      mt={2.5}
                      ml={2.5}
                      mr={2.5}

                      placeholder={"Floor"}
                      selectedValue={selectedFloor?.id}
                      onValueChange={selectFloor}
                      variant="rounded"
                    >
                      {floorList.map((floor, index) => {
                        return (
                          <Select.Item value={floor.id} label={floor.label} />
                        );
                      })}
                    </Select>

                    {/* Room */}

                    < Select
                      mt={2.5}
                      ml={2.5}
                      mr={2.5}

                      isDisabled={(selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length) ? false : true}

                      placeholder={"Room"}
                      selectedValue={selectedRoom?.id.toString()}
                      onValueChange={(value: string) => selectRoom(parseInt(value))}
                      variant="rounded"
                    >
                      {selectedFloor?.roomList?.map((room, index) => {
                        if (room.room_list) {
                          return (
                            <Select.Item value={room.id.toString()} label={room.label} />
                          );
                        }
                      })}
                    </Select>

                    {/* Place */}
                    <Select
                      mt={2.5}
                      ml={2.5}
                      mr={2.5}

                      isDisabled={(selectedRoom && selectedRoom.places && selectedRoom.places.length > 0) ? false : true}
                      placeholder={"Place"}
                      selectedValue={selectedPlace?.id.toString()}
                      onValueChange={(value: string) => selectPlace(parseInt(value))}
                      variant="rounded"
                    >
                      {selectedRoom?.places?.map((place, index) => {
                        return (
                          <Select.Item value={place.id.toString()} label={place.label} />
                        );
                      })}
                    </Select>

                    {/* Filter */}
                    <Flex direction="row" alignItems="center" justify="flex-end"
                      mt={2.5}
                      ml={2.5}
                      mr={3}
                    >
                      <Button
                        startIcon={
                          <CloseIcon size="xs" />
                        }
                        onPress={clearForm}
                        variant="subtle"
                        color="secondary.500"
                        mr={2}
                        borderRadius={10}
                        size={"sm"}
                      >
                        Reset
                      </Button>
                      <Button
                        onPress={() => {
                          if (selectedRoom && !selectedPlace) {
                            searchSubmit(selectedRoom.id)
                          }
                          else if (selectedRoom && selectedPlace) {
                            searchSubmit(selectedRoom.id, selectedPlace.id)
                          }

                        }}
                        backgroundColor={"#654B07"}
                        variant="subtle"
                        borderRadius={10}
                        size={"sm"}
                      >
                        <Text color="white" fontSize={11}>
                          Search
                        </Text>
                      </Button>
                    </Flex>
                  </>
              }

              {/* Plan */}
              {castlePlanShown && selectedFloor && !floorListLoading && (
                floorMapImageLoading ?
                  <LoadingBox text="Loading castle plan" />
                  :
                  floorMapImage &&
                  <Box
                    mt={2.5}
                    ml={2.5}
                    mr={2.5}
                    onTouchStart={() => setIsInteractingWithCastlePlan(true)}
                    onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
                    <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} height={Dimensions.get("window").height - 350} />
                  </Box>
              )
              }

              {/* Item List */}
              <>
                {!castlePlanShown && (
                  inventoriesLoading ?
                    <LoadingBox text="Loading available inventories..." />
                    :
                    <Box mt={2.5} ml={2.5} mr={2.5}>
                      <ListView

                        navigation={navigation}
                        hideHeaderText

                        inventories={inventories}
                        numOfResults={numberOfResults}

                        data={data}
                        loadedPages={pagination ?? {}}
                        inventoriesDataLoading={dataLoading ?? {}}
                        handleLoadMoreItems={(inventoryName: string, cursor: number) => {
                          dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
                        }}

                      />
                    </Box>
                )
                }
              </>

            </VStack>
          </ScrollView>
          {/* item notes switch tab */}
          <HStack alignItems="center">
            <Button
              variant={"unstyled"}
              w="50%"
              onPress={() => { setCastlePlanShown(true) }}
            >
              <VStack alignItems={"center"}>
                <Text bold={castlePlanShown} mb={castlePlanShown ? undefined : 2}>
                  Castle
                </Text>
                {castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
              </VStack>
            </Button>
            <Button
              variant={"unstyled"}
              w="50%"
              onPress={() => { setCastlePlanShown(false) }}
            >
              <VStack alignItems={"center"}>
                <Text bold={!castlePlanShown} mb={!castlePlanShown ? undefined : 2}>
                  Results
                </Text>
                {!castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
              </VStack>
            </Button>
          </HStack>
        </Box>
      )
        :
        floorMapImageLoading ?
          <LoadingBox text="Loading castle plan" />
          :
          floorMapImage && selectedFloor &&
          <Box>
            <CastlePlanView fullScreenMode mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
          </Box>
      }
    </Box>
  );
}

export default PlanViewPage;