import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/providers/api/devices_provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/device/predict_device_model.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/views/widgets/equipment/asset_detail_page.dart';
import 'package:test_sa/views/widgets/equipment/predict_device_item_grid_view.dart';
import 'package:test_sa/views/widgets/equipment/predict_device_item_view.dart';
import 'package:test_sa/views/widgets/loaders/no_data_found.dart';

class PredictDeviceView extends StatefulWidget {
  static const String id = "/predict_device_view";
  List<PredictedAsset> predictedAsset;

  PredictDeviceView({Key? key, required this.predictedAsset}) : super(key: key);

  @override
  _PredictDeviceViewState createState() => _PredictDeviceViewState();
}

class _PredictDeviceViewState extends State<PredictDeviceView> with SingleTickerProviderStateMixin {
  late AssetProvider _devicesProvider;
  bool showListView = true;
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 1200),
      vsync: this,
    );
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _devicesProvider = Provider.of<AssetProvider>(context);
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: DefaultAppBar(
        title: 'Predicated Devices',
        actions: [
          IconButton(
            icon: Icon(!showListView ? Icons.view_list_sharp : Icons.grid_view_outlined, color: AppColor.icon2Color(context)),
            padding: EdgeInsets.zero,
            iconSize: 20,
            visualDensity: VisualDensity.compact,
            tooltip: !showListView ? "View as List" : "View as Grid",
            onPressed: () => setState(() {
              showListView = !showListView;
            }),
          ),
        ],
      ),
      body: Stack(
              children: [
                AnimatedSwitcher(
                  duration: const Duration(milliseconds: 500),
                  child: showListView
                      ? ListView.separated(
                          key: const ValueKey('list_view'),
                          padding: const EdgeInsets.all(16),
                          itemCount: widget.predictedAsset.length,
                          separatorBuilder: (listContext, itemIndex) => 12.height,
                          itemBuilder: (listContext, itemIndex) {
                            // Calculate staggered animation delay
                            final delay = itemIndex * 0.08;
                            final animation = Tween<double>(begin: 0.0, end: 1.0).animate(
                              CurvedAnimation(
                                parent: _animationController,
                                curve: Interval(
                                  delay.clamp(0.0, 0.7),
                                  (delay + 0.4).clamp(0.0, 1.0),
                                  curve: Curves.easeOut,
                                ),
                              ),
                            );

                            final slideAnimation = Tween<Offset>(
                              begin: const Offset(0.0, 0.15),
                              end: Offset.zero,
                            ).animate(
                              CurvedAnimation(
                                parent: _animationController,
                                curve: Interval(
                                  delay.clamp(0.0, 0.7),
                                  (delay + 0.4).clamp(0.0, 1.0),
                                  curve: Curves.easeOutCubic,
                                ),
                              ),
                            );

                            return FadeTransition(
                              opacity: animation,
                              child: SlideTransition(
                                position: slideAnimation,
                                child: PredictDeviceItemView(
                                  device: widget.predictedAsset[itemIndex],
                                  onPressed: (device) {
                                    //We are not getting asset id in response only have serial number
                                    // Navigator.of(context).pushNamed(AssetDetailPage.id, arguments: device.assetId);
                                  },
                                ),
                              ),
                            );
                          },
                        )
                      : GridView.builder(
                          key: const ValueKey('grid_view'),
                          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 2,
                              crossAxisSpacing: 12,
                              childAspectRatio: 1.5,
                              mainAxisSpacing: 12),
                          itemCount: widget.predictedAsset.length,
                          padding: const EdgeInsets.all(16),
                          itemBuilder: (context, index) {
                            // Calculate staggered animation delay
                            final delay = index * 0.08;
                            final animation = Tween<double>(begin: 0.0, end: 1.0).animate(
                              CurvedAnimation(
                                parent: _animationController,
                                curve: Interval(
                                  delay.clamp(0.0, 0.8),
                                  (delay + 0.3).clamp(0.0, 1.0),
                                  curve: Curves.easeOut,
                                ),
                              ),
                            );

                            final slideAnimation = Tween<Offset>(
                              begin: const Offset(0.0, 0.3),
                              end: Offset.zero,
                            ).animate(
                              CurvedAnimation(
                                parent: _animationController,
                                curve: Interval(
                                  delay.clamp(0.0, 0.8),
                                  (delay + 0.3).clamp(0.0, 1.0),
                                  curve: Curves.easeOutCubic,
                                ),
                              ),
                            );

                            return FadeTransition(
                              opacity: animation,
                              child: SlideTransition(
                                position: slideAnimation,
                                child: PredictDeviceItemGridView(
                                  device: widget.predictedAsset[index],
                                  onPressed: (device) {
                                    //We are not getting asset id in response only have serial number
                                    // Navigator.of(context).pushNamed(AssetDetailPage.id, arguments: device.assetId);
                                  },
                                ),
                              ),
                            );
                          },
                        ),
                ),
              ],
            ),
    );
  }
}