import React from 'react';
import {useState, useEffect} from 'react';

const ViewBuilding = (props) => {
    //const [selectedBuilding, setSelectedBuilding] = useState(0);

    const selectedBuilding = (id) => {
        props.selectedBuilding(id);
    };

		const buildDescr = (building) => {
            console.log(building)
            if (!building) {
				return (
					<>
						{' '}
						<i>Click on a name to view more information</i>
					</>
				);
            }
			return (
				<>
					<b>Code: </b> {building.code}
					<br/>
					<b>Name: </b> {building.name}
					<br/>
					<b>Address: </b> {building.address}
					<br/>
					<b>Coordinates: </b> {building.coordinates && `${building.coordinates.latitude}, ${building.coordinates.longitude}`}
				</>
			)
		}

		return (
			<div>
				<p>
					{/* {buildDescr(data.find((building) => building.id === selectedBuilding))} */}
                    {/* {props.data.map(directory => {buildDescr(directory.id === selectedBuilding))}} */}
                    {/* props.data.map(directory => {
                        {
                            return (
                                buildDescr(directory);
                            );
                        }
                    }); */}
                    {/* {buildDescr(data.find(b => b.id === selectedBuilding(b.target.value)))} */}
                    {buildDescr(props.data.find(b => b.id === selectedBuilding))}

				</p>
			</div>
		);
	}
export default ViewBuilding;