import React, {useState, useEffect, useContext, createContext} from 'react';
import { Text, Title, ThemeIcon, Group, Container, Space } from '@mantine/core'
import { useAtom } from 'jotai';
import { serverConfigAtom } from '../../state/state'
import { GoLocation } from 'react-icons/go'
import { BsDoorClosed, BsDiagram2 } from 'react-icons/bs'
import { useNotifications } from '@mantine/notifications';
import { BiCabinet } from 'react-icons/bi'

import { backendAPI } from '../../services/backend-api';


function HomePage() {
    const [opened, setOpened] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [serverConfig] = useAtom(serverConfigAtom)
    const [overview, setOverview] = useState({})

    const notifications = useNotifications();

    useEffect(() => {
        console.log("LOADING LOCATIONS PAGE!")
        setIsLoading(true)
        async function fetchSettings() {
          backendAPI.get('/overview/all').then(results => {
            console.log("CONFIG IN LOCATIONS: ", serverConfig)
            console.log("Overview ", results.data)
            setOverview(results.data)

            setIsLoading(false)
          }).catch(err => {
            notifications.showNotification({
              title: 'Backend Notice',
              message: `Failed to fetch statistics from backend! ${err}`,
              autoClose: false,
              color: "red",
            })
            setIsLoading(false)
          })
    
        }
        fetchSettings();
    

    }, [])
    


    return (
        <>
        <Title order={2}>Your Instance Statistics</Title>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>{overview.NumLocations} Location{overview.NumLocations === 1 ? "": "s"}</Text>
                {overview.hasOwnProperty('LastAddedLocation') && overview.LastAddedLocation !== null &&
                    <>
                        <Text>Last Added Location: </Text>
                        <Text>{overview.LastAddedLocation.Name}</Text>
                    </>
                }
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><BsDoorClosed /></ThemeIcon>
                <Text>{overview.NumRooms} Room{overview.NumRooms === 1 ? "": "s"}</Text>
                {overview.hasOwnProperty('LastAddedRoom') && overview.LastAddedRoom !== null &&
                    <>
                        <Text>Last Added Room: </Text>
                        <Text>{overview.LastAddedRoom.Name}</Text>
                    </>
                }
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><BiCabinet /></ThemeIcon>
                <Text>{overview.NumCabinets} Cabinet{overview.NumCabinets === 1 ? "": "s"}</Text>
                {overview.hasOwnProperty('LastAddedCabinet') && overview.LastAddedCabinet !== null &&
                    <>
                        <Text>Last Added Cabinet: </Text>
                        <Text>{overview.LastAddedCabinet.Name}</Text>
                    </>
                }
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><BsDiagram2 /></ThemeIcon>
                <Text>{overview.NumItems} Item{overview.NumItems === 1 ? "": "s"}</Text>
                {overview.hasOwnProperty('LastAddedItem') && overview.LastAddedItem !== null &&
                    <>
                        <Text>Last Added Item: </Text>
                        <Text>{overview.LastAddedItem.Name}</Text>
                    </>
                }
            </Group>
        </Container>

        </>

    );
}

export default HomePage;
