'use client';
// ---------------------------------------------------------------------------------------------------------------------
//                                                       Imports
// ---------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------- Components ------------------------------------------------------
import { DeckGL } from 'deck.gl';
import { Map } from 'react-map-gl';
// ---------------------------------------------------------------------------------------------------------------------

// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
import { useData } from './hooks/useData';
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import './styles.scss';
import 'mapbox-gl/dist/mapbox-gl.css';
import HeartIcon from '@/assets/HeartIcon';
// ---------------------------------------------------------------------------------------------------------------------

const Home = () => {
	const { canUseGeolocation, geoError, initialState } = useData();

	if (!canUseGeolocation && !geoError) {
		return <p className='appMessage'>Chargement...</p>;
	}

	if (!canUseGeolocation && geoError) {
		return (
			<p className='appMessage'>
				Nous avons besoin d&apos;accéder à votre position pour pouvoir
				utiliser l&apos;application.
			</p>
		);
	}

	return (
		<div className='mapContainer'>
			<DeckGL
				initialViewState={initialState}
				layers={[]}
				controller
				useDevicePixels={false}
				getCursor={({ isDragging }) =>
					isDragging ? 'grabbing' : 'grab'
				}
			>
				<Map
					logoPosition='bottom-right'
					style={{
						width: '100%',
						height: '100%',
					}}
					mapboxAccessToken={process.env.MAPBOX_TOKEN}
					mapStyle={
						'mapbox://styles/unepicier/cm0l8fydz009v01qkh9bvau16'
					}
					preserveDrawingBuffer
				></Map>
			</DeckGL>

			<button className='dropLove'>
				<HeartIcon />
				Placer un love
			</button>
		</div>
	);
};

export default Home;