import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';

import '../../../models/lookup.dart';
import '../../../new_views/app_style/app_color.dart';
import '../../../providers/service_request_providers/commissioning_status_provider.dart';

class CommissioningStatusButtons extends StatefulWidget {
  final Function(Lookup) onSelect;
  final Lookup initialValue;

  CommissioningStatusButtons({Key key, this.onSelect, this.initialValue}) : super(key: key);

  @override
  State<CommissioningStatusButtons> createState() => _CommissioningStatusButtonsState();
}

class _CommissioningStatusButtonsState extends State<CommissioningStatusButtons> {
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    WidgetsFlutterBinding.ensureInitialized().addPostFrameCallback((timeStamp) {
      final provider = Provider.of<CommissioningStatusProvider>(context, listen: false);
      provider.getDate().then((value) {
        if (widget.initialValue != null) _selectedIndex = provider.items.indexOf(widget.initialValue);
        setState(() {});
      });
    });
  }

  @override
  void didUpdateWidget(covariant CommissioningStatusButtons oldWidget) {
    if (widget.initialValue != oldWidget.initialValue) {
      final provider = Provider.of<CommissioningStatusProvider>(context, listen: false);
      if (widget.initialValue != null) {
        _selectedIndex = provider.items.indexOf(widget.initialValue);
      } else {
        _selectedIndex = 0;
      }
      setState(() {});
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        context.translation.jopStatus.heading5(context).paddingOnly(start: 16, end: 16),
        8.height,
        Consumer<CommissioningStatusProvider>(
          builder: (context, snapshot, _) {
            return snapshot.loading
                ? Shimmer(
                    gradient: const LinearGradient(colors: [AppColor.primary40, AppColor.primary50, AppColor.primary60]),
                    child: Row(
                      children: [
                        const _Skelton().expanded,
                        8.width,
                        const _Skelton().expanded,
                        8.width,
                        const _Skelton().expanded,
                      ],
                    ).paddingOnly(start: 16, end: 16),
                  )
                : SizedBox(
                    height: 36.toScreenHeight,
                    child: ListView.builder(
                      itemCount: snapshot.items.length + 1,
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      padding: EdgeInsetsDirectional.only(start: 16.toScreenWidth),
                      itemBuilder: (context, index) => Container(
                        margin: EdgeInsets.symmetric(horizontal: 4.toScreenWidth),
                        padding: EdgeInsets.symmetric(vertical: 8.toScreenHeight, horizontal: (_selectedIndex == index ? 12 : 8).toScreenWidth),
                        alignment: Alignment.center,
                        foregroundDecoration: _selectedIndex != index
                            ? null
                            : ShapeDecoration(
                                color: (context.isDark ? AppColor.neutral30 : AppColor.neutral50).withOpacity(0.1),
                                shape: RoundedRectangleBorder(
                                  side: BorderSide(width: 1, color: AppColor.blueStatus(context)),
                                  borderRadius: BorderRadius.circular(7),
                                ),
                              ),
                        decoration: ShapeDecoration(
                          color: _selectedIndex == index ? AppColor.selectedButtonColor(context) : AppColor.unSelectedButtonColor(context),
                          shape: RoundedRectangleBorder(
                            side: _selectedIndex == index ? BorderSide(width: 1, color: AppColor.blueStatus(context)) : BorderSide.none,
                            borderRadius: BorderRadius.circular(7),
                          ),
                          shadows: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 14, offset: const Offset(0, 0), spreadRadius: 0)],
                        ),
                        child: (index == 0 ? "All Assets" : snapshot.items[index - 1].name).tinyFont(context).custom(color: AppColor.filterButtonTextColor(context)),
                      ).onPress(() {
                        setState(() {
                          _selectedIndex = index;
                        });
                        widget.onSelect(index == 0 ? null : snapshot.items[index - 1]);
                      }),
                    ),
                  );
          },
        ),
      ],
    );
  }
}

class _Skelton extends StatelessWidget {
  const _Skelton({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppColor.neutral50.withOpacity(0.05),
        borderRadius: BorderRadius.circular(7),
      ),
    );
  }
}