immich/mobile/lib/widgets/map/map_settings/map_theme_picker.dart

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
import 'package:maplibre_gl/maplibre_gl.dart';

class MapThemePicker extends StatelessWidget {
  final ThemeMode themeMode;
  final Function(ThemeMode) onThemeChange;

  const MapThemePicker({
    super.key,
    required this.themeMode,
    required this.onThemeChange,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 20),
          child: Center(
            child: Text(
              "map_settings_theme_settings",
              style: context.textTheme.bodyMedium
                  ?.copyWith(fontWeight: FontWeight.bold),
            ).tr(),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _BorderedMapThumbnail(
              name: "Light",
              mode: ThemeMode.light,
              shouldHighlight: themeMode == ThemeMode.light,
              onThemeChange: onThemeChange,
            ),
            _BorderedMapThumbnail(
              name: "Dark",
              mode: ThemeMode.dark,
              shouldHighlight: themeMode == ThemeMode.dark,
              onThemeChange: onThemeChange,
            ),
            _BorderedMapThumbnail(
              name: "System",
              mode: ThemeMode.system,
              shouldHighlight: themeMode == ThemeMode.system,
              onThemeChange: onThemeChange,
            ),
          ],
        ),
      ],
    );
  }
}

class _BorderedMapThumbnail extends StatelessWidget {
  final ThemeMode mode;
  final String name;
  final bool shouldHighlight;
  final Function(ThemeMode) onThemeChange;

  const _BorderedMapThumbnail({
    required this.mode,
    required this.name,
    required this.shouldHighlight,
    required this.onThemeChange,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
            border: Border.fromBorderSide(
              BorderSide(
                width: 4,
                color: shouldHighlight
                    ? context.colorScheme.onSurface
                    : Colors.transparent,
              ),
            ),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
          ),
          child: MapThumbnail(
            zoom: 2,
            centre: const LatLng(47, 5),
            onTap: (_, __) => onThemeChange(mode),
            themeMode: mode,
            showAttribution: false,
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 10),
          child: Text(
            name,
            style: context.textTheme.bodyMedium?.copyWith(
              fontWeight: shouldHighlight ? FontWeight.bold : null,
            ),
          ),
        ),
      ],
    );
  }
}