import 'package:car_customer_app/view_models/appointments_view_model.dart';
import 'package:car_customer_app/views/appointments/widgets/customer_appointment_slider_widget.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/config/routes.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/widgets/common_widgets/categories_list.dart';
import 'package:provider/provider.dart';

class AppointmentsFragment extends StatelessWidget {
  const AppointmentsFragment({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: MyColors.backgroundColor,
      width: double.infinity,
      height: double.infinity,
      child: Consumer(
        builder: (BuildContext context, AppointmentsVM appointmentsVM, Widget? child) {
          return Column(
            children: [
              16.height,
              FiltersList(
                filterList: appointmentsVM.appointmentsFilterOptions,
                onFilterTapped: (index, selectedFilterId) => appointmentsVM.applyFilterOnAppointmentsVM(index: index),
              ),
              16.height,
              Expanded(
                child: appointmentsVM.myAppointments.isEmpty
                    ? Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          "No Appointments to show.".toText(fontSize: 16, color: MyColors.lightTextColor),
                        ],
                      )
                    : ListView.builder(
                        shrinkWrap: true,
                        itemCount: appointmentsVM.myAppointments.length,
                        itemBuilder: (BuildContext context, int index) {
                          return BuildAppointmentContainerForCustomer(
                            onTapped: () => navigateWithName(context, AppRoutes.appointmentDetailView, arguments: appointmentsVM.myAppointments[index]),
                            appointmentListModel: appointmentsVM.myAppointments[index],
                          );
                        },
                      ),
              ),
            ],
          );
        },
      ),
    );
  }
}