import React, {useState, useEffect } from 'react';
import { useAtom } from 'jotai'
import { serverConfigAtom } from '../../../state/state';
import { BsDoorClosed } from 'react-icons/bs';
import { BiEdit } from 'react-icons/bi';
import {  Loader, Center, Title, Group, Button, Space, Container, ThemeIcon, Text, Image, Accordion, Avatar } from '@mantine/core'
import { useNavigate, useLocation, useParams  } from "react-router-dom";
import { useNotifications } from '@mantine/notifications';
import { GoLocation } from 'react-icons/go'

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

function LocationDetailsPage() {
    const location = useLocation()



    // const [opened, setOpened] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [serverConfig] = useAtom(serverConfigAtom)
    const [locationDetails, setLocationDetails] = useState({})

    let navigate = useNavigate();

    const notifications = useNotifications();

    let routeLocationID = useParams()
    

    
    useEffect(() => {
        let locationDetailsProps = {}
        if (location.state) {
            if (location.state.hasOwnProperty('location')) {
                locationDetailsProps = location.state.location
            }
        } 
        
        if (Object.keys(locationDetailsProps).length === 0) {
            console.log("manually fetching location details!")
            setIsLoading(true)
            async function fetchSettings() {
              backendAPI.get(`/locations/${routeLocationID.id}`).then(results => {
                console.log("CONFIG IN LOCATIONS: ", serverConfig)
                console.log("LOCATIONS: ", results.data)
                setLocationDetails(results.data)
                setIsLoading(false)
              }).catch(err => {
                notifications.showNotification({
                  title: 'Backend Notice',
                  message: `Failed to fetch locations from backend! ${err}`,
                  autoClose: false,
                  color: "red",
                })
                setIsLoading(false)
              })
        
            }
            fetchSettings();
        } else {
            console.log("Using passed state!", locationDetailsProps)
            setLocationDetails(locationDetailsProps)
        }
       
        

    }, [])




    return (
        <>
        <Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
        <Center><Title order={1}>{locationDetails.Name}</Title></Center>
        <Button color="yellow" leftIcon={<BiEdit size={24} />}>Edit Location</Button>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Description: </Text>
                <Text>{locationDetails.Description}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Notes: </Text>
                <Text>{locationDetails.Notes}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Address: </Text>
                <Text>{locationDetails.Address}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Square Feet: </Text>
                <Text>{locationDetails.SquareFeet}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Lat/Long: </Text>
                <Text>{locationDetails.Latitude}/{locationDetails.Longitude}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Date Purchased: </Text>
                <Text>{locationDetails.DatePurchased}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Purchase Price: </Text>
                <Text>{locationDetails.PurchasePrice}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Group>
                <ThemeIcon variant="light" size={30}><GoLocation /></ThemeIcon>
                <Text>Current Value: </Text>
                <Text>{locationDetails.CurrentValue}</Text>
            </Group>
        </Container>
        <Space h="md" />
        <Container>
            <Image src={`${serverConfig.baseURL}/files/locations/${locationDetails.Name}/${locationDetails.CoverPhoto}`} />
        </Container>
        <Accordion mt="xl">
            <Accordion.Item value="notifications">
            <Accordion.Control>
                <Group noWrap>
                    <Avatar color="blue" radius="xl" size="lg">
                    <BsDoorClosed />
                    </Avatar>
                    <div>
                    <Text>Rooms</Text>
                    <Text size="sm" color="dimmed" weight={400}>
                        Rooms in this Location
                    </Text>
                    </div>
                </Group>
            </Accordion.Control>
            <Accordion.Panel>

            </Accordion.Panel>
            </Accordion.Item>
        </Accordion>
        </>

    );
}

export default LocationDetailsPage;