import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/collections/language_codes.dart';
import 'package:spotube/collections/spotify_markets.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/modules/getting_started/blur_card.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/l10n/l10n.dart';
import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';

class GettingStartedPageLanguageRegionSection extends HookConsumerWidget {
  final void Function() onNext;
  const GettingStartedPageLanguageRegionSection(
      {super.key, required this.onNext});

  @override
  Widget build(BuildContext context, ref) {
    final preferences = ref.watch(userPreferencesProvider);

    return SafeArea(
      child: Center(
        child: BlurCard(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: [
                  const Icon(
                    SpotubeIcons.language,
                    size: 16,
                  ),
                  const SizedBox(width: 8),
                  Text(context.l10n.language_region).semiBold(),
                ],
              ),
              const Gap(30),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(context.l10n.choose_your_region).semiBold(),
                  Text(
                    context.l10n.choose_your_region_description,
                  ).small().muted(),
                  const Gap(16),
                  Text(context.l10n.market_place_region).small(),
                  const Gap(8),
                  SizedBox(
                    width: double.infinity,
                    child: Select<Market>(
                      value: preferences.market,
                      onChanged: (value) {
                        if (value == null) return;
                        ref
                            .read(userPreferencesProvider.notifier)
                            .setRecommendationMarket(value);
                      },
                      placeholder: Text(preferences.market.name),
                      itemBuilder: (context, value) => Text(
                        spotifyMarkets
                            .firstWhere((element) => element.$1 == value)
                            .$2,
                      ),
                      searchPlaceholder: Text(context.l10n.search),
                      searchFilter: (item, query) {
                        final market = spotifyMarkets
                            .firstWhere((element) => element.$1 == item)
                            .$2
                            .toLowerCase();

                        return market.contains(query.toLowerCase()) ? 1 : 0;
                      },
                      children: [
                        for (final market in spotifyMarkets)
                          SelectItemButton(
                            value: market.$1,
                            child: Text(market.$2),
                          ),
                      ],
                    ),
                  ),
                  const Gap(36),
                  Text(
                    context.l10n.choose_your_language,
                  ).semiBold(),
                  const Gap(16),
                  Text(context.l10n.language).small(),
                  const Gap(8),
                  SizedBox(
                    width: double.infinity,
                    child: Select<Locale>(
                      value: preferences.locale,
                      onChanged: (locale) {
                        if (locale == null) return;
                        ref
                            .read(userPreferencesProvider.notifier)
                            .setLocale(locale);
                      },
                      placeholder: Text(context.l10n.system_default),
                      itemBuilder: (context, value) =>
                          value.languageCode == "system"
                              ? Text(context.l10n.system_default)
                              : Text(
                                  LanguageLocals.getDisplayLanguage(
                                          value.languageCode)
                                      .toString(),
                                ),
                      searchPlaceholder: Text(context.l10n.search),
                      searchFilter: (locale, query) {
                        final language = LanguageLocals.getDisplayLanguage(
                                locale.languageCode)
                            .toString();

                        return language
                                .toLowerCase()
                                .contains(query.toLowerCase())
                            ? 1
                            : 0;
                      },
                      children: [
                        SelectItemButton(
                          value: const Locale("system", "system"),
                          child: Text(context.l10n.system_default),
                        ),
                        for (final locale in L10n.all)
                          SelectItemButton(
                            value: locale,
                            child: Text(
                              LanguageLocals.getDisplayLanguage(
                                      locale.languageCode)
                                  .toString(),
                            ),
                          ),
                      ],
                    ),
                  ),
                ],
              ),
              const Gap(48),
              Align(
                alignment: Alignment.centerRight,
                child: Button.primary(
                  trailing: const Icon(SpotubeIcons.angleRight),
                  onPressed: onNext,
                  child: Text(context.l10n.next),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}