import { PickingInfo } from 'deck.gl';
import { FormEvent, useCallback } from 'react';

export const useActions = ({
	deckRef,
	viewState,
	setClickedItem,
	setIsAddLoveOpened,
	setIsLoading,
	setAddLoveMessage,
}) => {
	const toggleLoveMenu = () => {
		setIsAddLoveOpened((prev) => !prev);
	};

	const addPoint = async (ev: FormEvent<HTMLFormElement>) => {
		ev.preventDefault();

		if (!ev.currentTarget.reportValidity()) {
			return;
		}

		setIsLoading(true);

		const formData = new FormData(ev.currentTarget);
		const location = formData.get('location');
		const comment = formData.get('comment');

		const body: { [key: string]: any } = {
			location: location.toString(),
		};

		if (comment && comment.toString().length > 0) {
			body.comment = comment.toString();
		}

		const token = localStorage.getItem('token');

		const { latitude, longitude } = viewState;

		const point = {
			type: 'Point',
			coordinates: [longitude, latitude],
		};

		body.geopoint = point;

		try {
			const request = await fetch('/api/point', {
				method: 'POST',
				headers: {
					Authorization: token,
					'Content-Type': 'application/json',
				},
				body: JSON.stringify(body),
			});

			if (request.status == 403) {
				setIsLoading(false);
				setAddLoveMessage('Reconnectez-vous pour réessayer');
				return;
			}
			if (request.status == 400) {
				setIsLoading(false);
				setAddLoveMessage('Erreur interne. Veuillez réessayer');
				return;
			}

			setIsLoading(false);
			setIsAddLoveOpened(false);
		} catch (error) {
			console.error(error);
			setAddLoveMessage('Erreur interne. Veuillez réessayer');
			setIsLoading(false);
		}
	};

	const onMapClick = useCallback(
		(ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
			if (!deckRef.current) return;

			const containerRect = ev.currentTarget.getBoundingClientRect();
			const x = ev.clientX - containerRect.left;
			const y = ev.clientY - containerRect.top;

			const pickInfos: PickingInfo | null = deckRef.current.pickObject({
				x,
				y,
				radius: 1,
				depth: 5,
			});
			console.log('pickInfos: ', pickInfos);
			if (!pickInfos) {
				setClickedItem(null);
				return;
			}

			setClickedItem(pickInfos);
		},
		[deckRef, setClickedItem]
	);

	return { toggleLoveMenu, addPoint, onMapClick };
};