aswi2023one-team-to-rule-them-all-gitlab/src/pages/PlanViewPage.tsx @ 2b71499c

import React, { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../stores/store"
import { useWindowDimensions } from "react-native"
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 } from "native-base"
import { ErrorToast } from "../components/toast/ErrorToast"
import { Floor, Place, Room } from "../types/plan"
import { getFloorList, getPlanInventories, getPlanItems } from "../stores/actions/planThunks"
import { login } from "../stores/actions/userThunks"
import { getPlanItemsRequest } from "../api/planservice"
import ItemPreview from "../components/listView/ItemPreview"
import { parseArtists, parseImage } from "../components/listView/ListViewInventoryGroup"
import PlanView from "../components/plan/PlanView"
import { BASE_API_URL } from "../api/constants"

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

  const layout = useWindowDimensions();

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

  const pageSize = 20
  const currentPage = 0
  const totalPages = 100

  const DEFAULT_FLOOR = "first_floor"

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

  const dispatch = useDispatch<AppDispatch>();

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

  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 && selectedRoom) {
      if (!itemInventoriesLoading) {
        dispatch(getPlanInventories({ room: selectedRoom.id, place: selectedPlace?.id }))
      }
    }
  }, [selectedPlace, selectedRoom])


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


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

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

    dispatch(getPlanItems({ page: pageNumber, items: pageSize, room: roomId, place: placeId, activeTab: 0 }))
  }

  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")
    selectFloor(DEFAULT_FLOOR)
    setSelectedRoom(undefined)
    setSelectedPlace(undefined)
  }

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

  return (
    <Box>
      {/* 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 */}
            {selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length > 0 &&
              < Select
                mt={2.5}
                ml={2.5}
                mr={2.5}

                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 */}
            {selectedRoom && selectedRoom.places && selectedRoom.places.length > 0 &&
              <Select
                mt={2.5}
                ml={2.5}
                mr={2.5}

                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
                endIcon={
                  <CloseIcon size="xs" />
                }
                onPress={clearForm}
                variant="outline"
                color="primary.500"
                borderColor="primary.100"
                mr={2}
                borderRadius={15}
                size={"md"}
              >
                Reset
              </Button>
              <Button
                onPress={() => {
                  if (selectedRoom && !selectedPlace) {
                    searchSubmit(currentPage, selectedRoom.id)
                  }
                  else if (selectedRoom && selectedPlace) {
                    searchSubmit(currentPage, selectedRoom.id, selectedPlace.id)
                  }

                }}
                colorScheme="primary"
                background={"primary.100"}
                variant="solid"
                borderRadius={15}
                size={"md"}
              >
                Search
              </Button>
            </Flex>
          </>
      }



      {/* Plan */}
      {/* temporary prototype */}

      {selectedFloor && !floorListLoading &&
        <PlanView imageUrl={BASE_API_URL + "/downloads/" + selectedFloor.id} />
      }

      {/* Item List */}
      <>
        {itemInventoriesLoading ?
          <LoadingBox text="Loading available inventories..." />
          :
          <>
            <Text>TODO view inventories in SearchItemPreview way</Text>
            {itemInventories.map((inventory) => {
              <Text>{inventory.label}</Text>
            })}
          </>

        }
        {/* 
        {itemList.map((item, index) => {
          return (
            <Box>
              <ItemPreview
                // @ts-ignore
                caption={item.object[0].caption}
                title={item.text}
                name={parseArtists(item)}
                image={parseImage(item)}
                itemId={item.xml_id}
                inventoryLabel={item.inventory.label}
                navigation={navigation}
              />
            </Box> */}
      </>


    </Box >


  );
}

export default PlanViewPage;