import 'package:flutter/material.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 'package:test_sa/models/ppm/recurrent_wo.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/views/pages/user/ppm/ppm_work_order/recurrent_wo/components/room_inspection_card.dart';
import 'package:test_sa/views/widgets/loaders/app_loading.dart';

class RoomTabsWidget extends StatefulWidget {
  final RecurrentWoData? model;

  const RoomTabsWidget({Key? key, required this.model}) : super(key: key);

  @override
  State<RoomTabsWidget> createState() => _RoomTabsWidgetState();
}

class _RoomTabsWidgetState extends State<RoomTabsWidget> {
  int selectedIndex = 0;
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.all(8.toScreenHeight),
          height: 57.toScreenHeight,
          width: double.infinity,
          decoration: BoxDecoration(
            color: context.isDark ? AppColor.neutral50 : AppColor.white10,
            borderRadius: BorderRadius.circular(10),
          ),
          child: ListView(
            scrollDirection: Axis.horizontal,
            // mainAxisAlignment: MainAxisAlignment.spaceAround,
            padding: EdgeInsets.zero,
            children: widget.model!.planRecurrentMedicalTaskRooms!.asMap().entries.map((task) {
              final int index = task.key;
              final String label = task.value.room!.roomId!;
              return GestureDetector(
                onTap: () {
                  setState(() {
                    isLoading = true;
                    selectedIndex = index;
                    //TODO replace with api response delay...
                    Future.delayed(const Duration(seconds: 1)).whenComplete(() {
                      setState(() {
                        isLoading = false;
                      });
                    });
                  });
                },
                child: Container(
                  // margin: EdgeInsets.only(right: 8.toScreenWidth),
                  height: 49.toScreenHeight,
                  padding: EdgeInsets.symmetric(
                    // vertical: 20.toScreenHeight,
                    horizontal: 30.toScreenWidth,
                  ),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: selectedIndex == index ? (context.isDark ? AppColor.neutral60 : AppColor.neutral110) : Colors.transparent,
                    borderRadius: BorderRadius.circular(7),
                  ),
                  child: label.bodyText(context).custom(color: AppColor.white936),
                ),
              );
            }).toList(),
          ),
        ),
        isLoading
            ? const ALoading().paddingOnly(top: 150)
            : ListView(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                padding: EdgeInsets.zero,
                children: widget.model!.planRecurrentMedicalTaskRooms![selectedIndex].planRecurrentMedicalTaskRoomTabs!.map<Widget>((card) {
                  return RoomInspectionCard(inspectionModel: card);
                }).toList(),
              ),
      ],
    );
  }
}
