'use client';
import { createSlice } from '@reduxjs/toolkit';
import { CSSProperties } from 'react';

export interface GoogleMapPropsState {
	containerStyle: CSSProperties;
	centerOfMap: { lat: number; lng: number };
	currentCenterOfMap: { lat: number; lng: number };
	zoomNo: number;
	isMapActive: boolean;
	isGoogleExistenceVerified: boolean;
	isMapNotLoading: boolean;
	openStoppageIndex: number;
	isLoadingScreenActive: boolean;
	customStyles: google.maps.MapOptions['styles'];
	selectedMapTypeId: string;
	isCarvanMapUpdateLocationPending: boolean;
	carvanMapUniqueId: string;
}

const initialState: GoogleMapPropsState = {
	containerStyle: {
		height: '92.2vh',
		width: 'calc(100% - 450px)',
		position: 'relative',
		float: 'right',
	},
	centerOfMap: { lat: 20.61595, lng: 79.14421 },
	currentCenterOfMap: { lat: 20.61595, lng: 79.14421 },
	zoomNo: 5,
	isGoogleExistenceVerified: false,
	isMapActive: false,
	isMapNotLoading: true,
	isLoadingScreenActive: false,
	openStoppageIndex: 0,
	customStyles: [],
	selectedMapTypeId: 'roadmap',
	isCarvanMapUpdateLocationPending: false,
	carvanMapUniqueId: '',
};

export const mapSlice = createSlice({
	name: 'map',
	initialState,

	reducers: {
		setContainerStyle: (state, action: { payload: GoogleMapPropsState['containerStyle']; type: string }) => {
			state.containerStyle = action.payload;
		},
		setCenterOfMap: (state, action: { payload: GoogleMapPropsState['centerOfMap']; type: string }) => {
			state.centerOfMap = action.payload;
			state.currentCenterOfMap = action.payload;

			return state;
		},
		setSelectedMapTypeId: (state, action: { payload: GoogleMapPropsState['selectedMapTypeId']; type: string }) => {
			state.selectedMapTypeId = action.payload;
		},
		setCurrentCenterOfMap: (state, action: { payload: GoogleMapPropsState['currentCenterOfMap']; type: string }) => {
			state.currentCenterOfMap = action.payload;
		},
		setZoomNo: (state, action: { payload: GoogleMapPropsState['zoomNo']; type: string }) => {
			state.zoomNo = action.payload;
		},
		setIsMapActive: (state, action: { payload: GoogleMapPropsState['isMapActive']; type: string }) => {
			state.isMapActive = action.payload;
		},
		setIsGoogleExistenceVerified: (state, action: { payload: GoogleMapPropsState['isMapActive']; type: string }) => {
			state.isGoogleExistenceVerified = action.payload;
		},
		setIsMapNotLoading: (state, action: { payload: GoogleMapPropsState['isMapNotLoading']; type: string }) => {
			state.isMapNotLoading = action.payload;
		},
		setOpenStoppageIndex: (state, action: { payload: GoogleMapPropsState['openStoppageIndex']; type: string }) => {
			state.openStoppageIndex = action.payload;
			return state;
		},
		setIsLoadingScreenActive: (state, action: { payload: GoogleMapPropsState['isLoadingScreenActive']; type: string }) => {
			state.isLoadingScreenActive = action.payload;
			return state;
		},

		setCarvanMapUniqueId: (state, action: { payload: GoogleMapPropsState['carvanMapUniqueId']; type: string }) => {
			state.carvanMapUniqueId = action.payload;
			return state;
		},
		resetMapStylingAndOpenStoppageIndex: (state) => {
			const { isMapActive, isMapNotLoading } = state;
			state = { ...initialState, isMapActive, isMapNotLoading, isGoogleExistenceVerified: true };
			return state;
		},
	},
});
export const {
	setCenterOfMap,
	setContainerStyle,
	setZoomNo,
	setCurrentCenterOfMap,
	setIsMapActive,
	setIsMapNotLoading,
	setOpenStoppageIndex,
	setIsGoogleExistenceVerified,
	resetMapStylingAndOpenStoppageIndex,
	setIsLoadingScreenActive,
	setSelectedMapTypeId,
	setCarvanMapUniqueId,
} = mapSlice.actions;
export default mapSlice.reducer;