import React from 'react';
import { Text, Button, Card, Group, Menu, Image, Badge } from '@mantine/core'
import { useAtom } from 'jotai';
import { useNavigate } from "react-router-dom";
import { activePageAtom, roomFilterAtom, serverConfigAtom } from '../../state/main';



function RoomCard(props) {
    const {room, idx} = props
    const [serverConfig] = useAtom(serverConfigAtom)
    const [, setRoomsFilter] = useAtom(roomFilterAtom)
    const [, setActivePage] = useAtom(activePageAtom)

    const navigate = useNavigate();

    const setItemAndCabinetNumber = (category, name) => {
        if (category === null) {
          return <Text>0 {name}s</Text>
        } else if (category.length > 1) {
          return <Text>{category.length} {name}s</Text>
        } else {
          return <Text>1 {name}</Text>
        }
      }

    const navigateToCabinets = (roomID, roomName) => {
        setActivePage("cabinets")
        setRoomsFilter({"filterType": "room", "roomID": roomID, "commonName": "room", "metadata": roomName})
        navigate("/cabinets")
    }


    return (
        <Card key={`${idx} - ${room.ID}`} component="a" onClick={(e) => {}} shadow="sm" padding="md">
        <Card.Section>
            {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
        </Card.Section>
        <Group position="apart">
            <Text weight={500}>{room.Name}</Text>
            <Group>
                <Badge color="pink" variant="light">
                    {room.LocationName}
                </Badge>
                <Badge variant='light'>
                    {setItemAndCabinetNumber(room.Cabinets, "Cabinet")}
                </Badge>
                <Badge color='teal' variant='light'>
                    {setItemAndCabinetNumber(room.Items, "Item")}
                </Badge>
            </Group>
        </Group>
        <Text size="sm">{room.Description}</Text>
        <Group>
            <Button onClick={() => console.log("test")}>View Details</Button>
            <Button onClick={() => navigateToCabinets(room.id, room.Name)}>View Cabinets</Button>
            <Button onClick={() => console.log("test")}>View Items</Button>
        </Group>
    </Card>
    );
}

export default RoomCard;