import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';

import '../controllers/watch_theme_controller.dart';
import '../widgets/custom_theme_card.dart';
import '../widgets/official_theme_grid.dart';
import '../widgets/watch_theme_gradient_scaffold.dart';
import '../widgets/watch_theme_header.dart';

class WatchThemeView extends GetView<WatchThemeController> {
  const WatchThemeView({super.key});

  @override
  Widget build(BuildContext context) {
    final topPadding = MediaQuery.paddingOf(context).top + kToolbarHeight;
    return WatchThemeGradientScaffold(
      title: context.l10n.watchThemePageTitle,
      onBack: controller.executeBackLogic,
      body: Obx(
        () => SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          padding: EdgeInsets.only(top: topPadding, bottom: 24),
          child: Column(
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: controller.onHeaderTap,
                child: WatchThemeHeader(
                  themeImageUrl:
                      controller.selectedThemeItem.value?.energeticImage,
                ),
              ),
              const SizedBox(height: 26),
              OfficialThemeGrid(
                themes: controller.officialThemeItems,
                activeThemeId: controller.selectedThemeItem.value?.id ?? 0,
                onThemeTap: controller.selectOfficialTheme,
              ),
              const SizedBox(height: 12),
              CustomThemeCard(
                isPremium: controller.isPremium.value,
                customThemes: controller.customThemeItems,
                activeThemeId: controller.selectedThemeItem.value?.id ?? 0,
                onCreateTap: controller.createCustomTheme,
                onThemeTap: controller.previewCustomTheme,
              ),
            ],
          ),
        ),
      ),
    );
  }
}