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/luminosity/provider/lum_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 LightScreen extends StatelessWidget {
  const LightScreen({super.key, this.lightIntensity = 0});

  final double lightIntensity;

  double get value => lightIntensity;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => LumProvider(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Light', style: AppTheme.labelMedium),
          centerTitle: true,
          backgroundColor: Colors.white,
          scrolledUnderElevation: 0,
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 16),
              child: Icon(
                BootstrapIcons.sun,
                color: Colors.yellow.shade600,
              ),
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            padding: EdgeInsets.all(16.w),
            children: [
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.05,
              ),
              SizedBox(
                height: 240.h,
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    const Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(BootstrapIcons.sun,
                              size: 32, color: Colors.orange),
                        ],
                      ),
                    ),
                    AnimatedRadialGauge(
                      duration: const Duration(seconds: 3),
                      curve: Curves.easeOut,
                      value: value,
                      axis: GaugeAxis(
                        degrees: 360,
                        min: 0,
                        max: 500,
                        style: GaugeAxisStyle(
                          background: Colors.grey.shade100,
                          thickness: 100,
                        ),
                        progressBar: GaugeBasicProgressBar(
                          gradient: GaugeAxisGradient(colors: [
                            Colors.yellow.shade100,
                            Colors.orange.shade200,
                          ]),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16),
              Text(
                '$value lux',
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              const SizedBox(height: 16),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Intensitas Cahaya',
                    style: AppTheme.labelMedium,
                    textAlign: TextAlign.center,
                  ),
                  IconButton(
                      iconSize: 20.r,
                      color: Colors.blue,
                      onPressed: () {},
                      icon: const Icon(BootstrapIcons.info_circle))
                ],
              ),
              SizedBox(height: 16.h),
              const Text('Grafik'),
              SizedBox(height: 16.h),
              AspectRatio(
                aspectRatio: 1.8.h,
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey.shade300, width: 1.w),
                    borderRadius: BorderRadius.circular(16.w),
                  ),
                  child: Consumer<LumProvider>(
                      builder: (context, provider, child) {
                    switch (provider.dataState) {
                      case ResultState.loading:
                        return const Center(
                          child: CupertinoActivityIndicator(),
                        );
                      case ResultState.hasData:
                        return GarphicWidget(
                          gradientColors: [
                            Colors.yellow.shade100,
                            Colors.orange.shade200,
                          ],
                          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'),
                        );
                    }
                  }),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
