import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:hub/flutter_flow/index.dart';
import 'package:hub/shared/utils.dart';

typedef EnhancedCarouselViewKey<T> = GlobalKey<_EnhancedCarouselViewState<T>>;

class EnhancedCarouselView<T> extends StatefulWidget {
  final Future<List<T?>> Function() dataProvider;
  final void Function(T?, BuildContext) filter;
  final Widget Function<T>(T? item, bool isSelected) itemBuilder;
  final bool showIndicator;

  const EnhancedCarouselView({
    super.key,
    required this.dataProvider,
    required this.filter,
    required this.itemBuilder,
    this.showIndicator = false,
  });

  @override
  _EnhancedCarouselViewState<T> createState() =>
      _EnhancedCarouselViewState<T>();
}

class _EnhancedCarouselViewState<T> extends State<EnhancedCarouselView<T>> {
  T? selectedCategory;

  bool itemIsSelected(T item) {
    return selectedCategory == item;
  }

  @override
  Widget build(BuildContext context) {
    final theme = FlutterFlowTheme.of(context);
    final backgroundColor = theme.primary;
    final overlayColor = WidgetStateProperty.all(Colors.transparent);

    return Stack(
      children: [
        Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(15, 0, 50, 0),
              child: Text(
                FFLocalizations.of(context).getVariableText(
                  ptText: 'Suas Categorias',
                  enText: 'Your Categories',
                ),
                style: TextStyle(
                  color: FlutterFlowTheme.of(context).primaryText,
                  fontSize: LimitedFontSizeUtil.getHeaderFontSize(context),
                ),
              ),
            ),
            FutureBuilder<List<T?>>(
              future: widget.dataProvider(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) return SizedBox();
                final items = snapshot.data!
                    .map((item) =>
                        widget.itemBuilder(item, itemIsSelected(item as T)))
                    .toList();
                return SizedBox(
                  height: 130, // Set a specific height
                  child: CarouselView(
                    itemExtent: 140,
                    enableSplash: true,
                    itemSnapping: true,
                    controller: CarouselController(initialItem: 1),
                    backgroundColor: backgroundColor,
                    overlayColor: overlayColor,
                    padding: EdgeInsets.zero,
                    elevation: 0,
                    reverse: true,
                    shrinkExtent: 10,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    onTap: (index) async {
                      log('Selected: ${snapshot.data![index]}');
                      log('Selected Category: $selectedCategory');
                      final bool isSame =
                          itemIsSelected(snapshot.data![index]!);
                      setState(() {
                        if (isSame) {
                          selectedCategory = null;
                        } else {
                          selectedCategory = snapshot.data![index] as T;
                        }
                      });
                      if (isSame)
                        widget.filter(null, context);
                      else
                        widget.filter(snapshot.data![index] as T, context);
                    },
                    children: items,
                  ),
                );
              },
            ),
          ],
        ),
        if (widget.showIndicator)
          Positioned(
            left: 0,
            top: 50,
            child: Icon(Icons.arrow_left, size: 30, color: Colors.grey),
          ),
        if (widget.showIndicator)
          Positioned(
            right: 0,
            top: 50,
            child: Icon(Icons.arrow_right, size: 30, color: Colors.grey),
          ),
      ],
    );
  }
}