import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../health_trend/views/health_trend_content.dart';
import '../../controllers/trend/trend_controller.dart';

class HomeTrendView extends GetView<TrendController> {
  const HomeTrendView({super.key});

  @override
  Widget build(BuildContext context) {
    return const _TrendPageBackground(
      child: Column(
        children: [
          SafeArea(
            bottom: false,
            child: _HomeTrendHeader(),
          ),
          Expanded(child: _HomeTrendBody()),
        ],
      ),
    );
  }
}

class _HomeTrendBody extends GetView<TrendController> {
  const _HomeTrendBody();

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => HealthTrendContent(
        query: controller.query,
        selectedTypeIndex: controller.selectedTypeIndex.value,
        onTypeChanged: controller.changeType,
        onPeriodChanged: controller.changePeriod,
        onDateChanged: controller.changeDate,
      ),
    );
  }
}

class _HomeTrendHeader extends StatelessWidget {
  const _HomeTrendHeader();

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      height: 48,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text(
            '趋势',
            style: TextStyle(
              color: Color(0xFF0F0F11),
              fontSize: 24,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ),
    );
  }
}

class _TrendPageBackground extends StatelessWidget {
  const _TrendPageBackground({required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: const Color(0xFFF5F2FF),
      child: Stack(
        children: [
          Container(
            height: 300,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Color(0xFFC5B0FF), Color(0xFFF5F2FF)],
              ),
            ),
          ),
          child,
        ],
      ),
    );
  }
}