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 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) {
    return Scaffold(
        appBar: const DefaultAppBar(title: 'Predicated Devices'),
        body: SafeArea(
            child: 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) {
                    int? assetId = int.tryParse(device.assetId ?? '');
                    Navigator.of(context).pushNamed(AssetDetailPage.id, arguments: assetId);
                  },
                ),
              ),
            );
          },
        )));
  }
}