import 'package:agrilink_vocpro/core/constant/app_theme.dart';
import 'package:agrilink_vocpro/core/state/result_state.dart';
import 'package:agrilink_vocpro/features/home/detail_pages/humidity/provider/humidity_provider.dart';
import 'package:agrilink_vocpro/features/home/provider/home_provider.dart';
import 'package:agrilink_vocpro/features/home/widgets/graphic_widget.dart';
import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gauge_indicator/gauge_indicator.dart';
import 'package:provider/provider.dart';

class HumidityScreen extends StatelessWidget {
  const HumidityScreen({super.key, this.humidity = 0});

  final double humidity;
  double get value => humidity;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => HumidityProvider(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Humidity', style: AppTheme.labelMedium),
          centerTitle: true,
          scrolledUnderElevation: 0,
          leading: IconButton(
            icon: const Icon(CupertinoIcons.back),
            onPressed: () => Navigator.pop(context),
          ),
          backgroundColor: Colors.white,
          actions: const [
            Padding(
              padding: EdgeInsets.only(right: 16),
              child: Icon(
                BootstrapIcons.droplet_half,
                color: Colors.blue,
              ),
            )
          ],
        ),
        body: SafeArea(
          child: Consumer<HomeProvider>(builder: (context, provider, child) {
            return ListView(
              children: [
                SizedBox(
                  height: MediaQuery.of(context).size.height * 0.05,
                ),
                SizedBox(
                  height: 280.h,
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      Center(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            const Icon(BootstrapIcons.droplet_half,
                                size: 32, color: Colors.blue),
                            Text('$humidity %', style: AppTheme.headline1),
                          ],
                        ),
                      ),
                      RotatedBox(
                        quarterTurns: 2,
                        child: AnimatedRadialGauge(
                          duration: const Duration(seconds: 3),
                          curve: Curves.easeOut,
                          value: humidity,
                          axis: GaugeAxis(
                            degrees: 360,
                            min: 0,
                            max: 100,
                            pointer: null,
                            style: GaugeAxisStyle(
                              background: Colors.grey.shade100,
                              thickness: 50,
                            ),
                            progressBar: GaugeBasicProgressBar(
                              gradient: GaugeAxisGradient(colors: [
                                Colors.blue.shade200,
                                Colors.blue,
                              ]),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 16),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Humidity',
                      style: AppTheme.labelMedium,
                      textAlign: TextAlign.center,
                    ),
                    IconButton(
                        iconSize: 20.r,
                        color: Colors.blue,
                        onPressed: () {},
                        icon: const Icon(BootstrapIcons.info_circle))
                  ],
                ),
                const SizedBox(height: 16),
                Padding(
                  padding: EdgeInsets.only(left: 16.w),
                  child: const Text('Grafik dalam 7 hari terakhir'),
                ),
                const SizedBox(height: 16),
                AspectRatio(
                  aspectRatio: 2.h,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 16.w),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16.w),
                        border: Border.all(
                            color: Colors.grey.shade300, width: 1.w)),
                    child: Consumer<HumidityProvider>(
                        builder: (context, provider, child) {
                      switch (provider.dataState) {
                        case ResultState.loading:
                          return const Center(
                            child: CupertinoActivityIndicator(),
                          );
                        case ResultState.hasData:
                          return GarphicWidget(
                            gradientColors: const [
                              Colors.cyan,
                              Colors.amber,
                            ],
                            hour: List.generate(
                                provider.dataFetched.length,
                                (index) =>
                                    provider.dataFetched[index].hour ?? 0),
                            data: List.generate(
                                provider.dataFetched.length,
                                (index) =>
                                    provider.dataFetched[index].vicihumidity
                                        ?.toDouble() ??
                                    0),
                          );
                        case ResultState.error:
                          return Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  BootstrapIcons.exclamation_circle,
                                  color: Colors.grey.shade400,
                                ),
                                SizedBox(height: 8.h),
                                Text(
                                  'Terjadi Kesalahan',
                                  style: AppTheme.labelSmall,
                                ),
                              ],
                            ),
                          );
                        case ResultState.noData:
                          return Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  BootstrapIcons.database_fill_x,
                                  color: Colors.grey.shade400,
                                ),
                                SizedBox(height: 8.h),
                                Text(
                                  'Tidak Ada Data',
                                  style: AppTheme.labelSmall,
                                ),
                              ],
                            ),
                          );
                        case ResultState.initial:
                          return const SizedBox.shrink();
                        default:
                          return const Center(
                            child: Text('Default Error'),
                          );
                      }
                    }),
                  ),
                ),
                SizedBox(height: 16.h),
              ],
            );
          }),
        ),
      ),
    );
  }
}
