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 { serverConfigAtom } from '../../state/state';
import { Link } from 'react-router-dom';



function LocationCard(props) {
    const {location, idx} = props
    const [serverConfig] = useAtom(serverConfigAtom)

    const setRoomNumber = (rooms) => {
        if (rooms === null) {
          return <Text>0 Rooms</Text>
        } else if (rooms.length > 1) {
          return <Text>{rooms.length} Rooms</Text>
        } else {
          return <Text>1 Room</Text>
        }
      }



    return (
        <Card key={`${idx} - ${location.ID}`} shadow="md" padding="md">
            <Card.Section>
                {location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/files/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
                <Group position='right' style={{position: 'absolute', top: '5px', right: '5px', backgroundColor: 'grey', borderRadius: '25%'}}>
                    <Menu>
                    <Menu.Label>Edit</Menu.Label>
                    <Menu.Label>Delete</Menu.Label>
                    </Menu>
                </Group>

            </Card.Section>
            <Group position="apart">
                <Text weight={500}>{location.Name}</Text>
                <Badge variant="light">
                    { setRoomNumber(location.Rooms) }  
                </Badge>
            </Group>
            <Text size="sm">{location.Description}</Text>
            <Group position='right' mt="xl">
                <Button component={Link} to={`/locations/${location.ID}`} state={{ location: location }}>View Location Details</Button>
            </Group>
        </Card>
    );
}

export default LocationCard;