// Custom Google Maps style array. Desaturates the base map to near-
// grayscale so the only color on screen comes from the user-left pastel/
// mood-color pins - reinforcing the app's "memory and time" theme: the
// physical world fades to monochrome, and the messages people left behind
// are what still carry color.
//
// IMPORTANT: rules are applied in array order, and later rules override
// earlier ones for the same featureType/elementType. Several rules below
// rely on this - a broad rule (e.g. "hide all POIs") comes first, then a
// more specific rule for a subtype (e.g. "poi.park") comes after to
// override it just for that subtype. Reordering these can change the result.
export const mapStyles = [
	// 1. Desaturate EVERYTHING by default - not just geometry (roads, land,
	//    water, parks, admin areas), but also labels and icons. This is what
	//    turns Google's default colored highway-shield icons (blue/yellow
	//    route badges) and green park icons/text grayscale too. Per-feature
	//    rules below layer on top of this - e.g. water gets an explicit
	//    color later, which overrides this for water specifically.
	{
		elementType: 'all',
		stylers: [{ saturation: -100 }]
	},

	// 2. Hide ALL points-of-interest - icons AND labels - for generic
	//    businesses (restaurants, shops, etc). This is the "declutter"
	//    baseline; specific notable categories are turned back on below.
	{
		featureType: 'poi',
		elementType: 'all',
		stylers: [{ visibility: 'off' }]
	},

	// 3. Re-enable icons + labels for parks and schools specifically - these
	//    are "prominent"/notable landmarks that help with orientation, unlike
	//    generic businesses. Comes after rule 2 so it overrides it for just
	//    these two subtypes.
	{
		featureType: 'poi.park',
		elementType: 'all',
		stylers: [{ visibility: 'on' }]
	},
	{
		featureType: 'poi.school',
		elementType: 'all',
		stylers: [{ visibility: 'on' }]
	},

	// 4. Hide transit (bus/subway/rail) icons and labels entirely - transit
	//    info isn't relevant to a map about messages left at a location.
	{
		featureType: 'transit',
		elementType: 'all',
		stylers: [{ visibility: 'off' }]
	},

	// 5. Hide labels on minor/local streets - at the app's default zoom
	//    level these cover the map in small text. Arterial/highway road
	//    labels are left at their default (visible) so major roads still
	//    read for orientation - no rule needed for those, default = visible.
	{
		featureType: 'road.local',
		elementType: 'labels',
		stylers: [{ visibility: 'off' }]
	},

	// 6. Water gets a soft, muted blue-grey instead of plain desaturated
	//    grayscale - just enough color to read as "water" against the land,
	//    without breaking the overall desaturated look or competing with
	//    the pastel pins. This explicit `color` overrides rule 1's
	//    saturation tweak for water's geometry specifically.
	{
		featureType: 'water',
		elementType: 'geometry',
		stylers: [{ color: '#cfd8dc' }]
	},

	// 7. Hide administrative boundary lines (country/province/county) -
	//    mostly visual clutter for a hyperlocal "messages near you" map.
	{
		featureType: 'administrative',
		elementType: 'geometry',
		stylers: [{ visibility: 'off' }]
	},
	// 8. Hide administrative labels generally...
	{
		featureType: 'administrative',
		elementType: 'labels',
		stylers: [{ visibility: 'off' }]
	},
	// ...but bring back locality (city/town) labels specifically - knowing
	// what city/area you're in is basic orientation worth keeping, even
	// though the surrounding boundary lines are hidden by rule 7.
	{
		featureType: 'administrative.locality',
		elementType: 'labels',
		stylers: [{ visibility: 'on' }]
	}
];
