import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:mc_common_app/classes/consts.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/widgets/extensions/extensions_widget.dart';

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

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      options: CarouselOptions(
        height: 140,
        viewportFraction: 1.0,
        enlargeCenterPage: false,
        enableInfiniteScroll: false,
        //
        // onPageChanged: (index) {
        //   setState(() {
        //     _current = index;
        //   });
        // },
      ),
      itemCount: 10,
      itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) => const BuildAppointmentContainerForCustomer(isForHome: true),
    );
  }

  Widget showServices(String title) {
    return Row(
      children: [
        const Icon(
          Icons.ac_unit,
          color: MyColors.primaryColor,
          size: 18,
        ),
        8.width,
        title.toText(
          fontSize: 14,
          isBold: true,
        ),
      ],
    );
  }
}

class BuildAppointmentContainerForCustomer extends StatelessWidget {
  final bool? isForHome;

  const BuildAppointmentContainerForCustomer({Key? key, this.isForHome = false}) : super(key: key);

  Widget showServices(String title, String icon) {
    return Row(
      children: [
        SvgPicture.asset(icon),
        8.width,
        title.toText(
          fontSize: 14,
          isBold: true,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 21, left: 21, right: 21, top: 7),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              isForHome != null && isForHome!
                  ? Image.asset(
                      MyAssets.bnCar,
                      width: 56,
                      height: 56,
                      fit: BoxFit.fill,
                    ).toCircle(borderRadius: 100)
                  : Image.asset(
                      MyAssets.bnCar,
                      width: 80,
                      height: 85,
                      fit: BoxFit.cover,
                    ),
              8.width,
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    "Al Aziz Service Station".toText(color: MyColors.black, isBold: true, fontSize: 16),
                    Row(
                      children: [
                        MyAssets.miniClock.buildSvg(height: 12),
                        2.width,
                        "08:00 to 08:30  25 July, 2023".toText(
                          color: MyColors.lightTextColor,
                          fontSize: 12,
                        ),
                      ],
                    ),
                    9.height,
                    isForHome != null && isForHome!
                        ? Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              "Appointment Details".toText(
                                color: MyColors.primaryColor,
                                isUnderLine: true,
                                isBold: true,
                                fontSize: 14,
                              ),
                              const Icon(Icons.arrow_forward),
                            ],
                          )
                        : Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Expanded(
                                child: Column(
                                  children: [
                                    showServices("Maintenance", MyAssets.maintenanceIcon),
                                    2.height,
                                    showServices(
                                      "Accessories and Modification",
                                      MyAssets.modificationsIcon,
                                    ),
                                  ],
                                ),
                              ),
                              const Icon(
                                Icons.arrow_forward,
                              ),
                            ],
                          ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ).toWhiteContainer(width: double.infinity, allPading: 12),
    );
  }
}
