import 'package:flutter/material.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/models/appointments_models/appointment_list_model.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/common_widgets/card_button_with_icon.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';

class AppointmentDetailView extends StatelessWidget {
  AppointmentListModel appointmentListModel;

  AppointmentDetailView({Key? key, required this.appointmentListModel}) : super(key: key);

  final List<String> servicesList = [
    "Mechanic",
    "Electrician",
    " Car Denting",
    "Oil Change",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        title: "Appointment",
        profileImageUrl: MyAssets.bnCar,
        isRemoveBackButton: false,
        isDrawerEnabled: false,
      ),
      body: Container(
        padding: const EdgeInsets.only(bottom: 10, left: 21, right: 21),
        child: Stack(
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                appointmentListModel.providerName!.toText(fontSize: 18, isBold: true),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    MyAssets.miniClockDark.buildSvg(
                      height: 10,
                      width: 10,
                      fit: BoxFit.fill,
                    ),
                    10.width,
                    "${appointmentListModel.duration ?? ""}  ${appointmentListModel.appointmentDate!.toFormattedDateWithoutTime()}".toText(fontSize: 12, isBold: true, color: MyColors.lightTextColor),
                  ],
                ),
                13.height,
                Row(
                  children: [
                    MyAssets.maintenanceIcon.buildSvg(
                      height: 10,
                      width: 10,
                      fit: BoxFit.fill,
                    ),
                    10.width,
                    "Maintenance".toText(fontSize: 18, isBold: true),
                  ],
                ),
                Column(
                  children: servicesList
                      .map((e) => e
                          .toText(
                            textAlign: TextAlign.start,
                            fontSize: 13,
                            isBold: true,
                            color: MyColors.lightTextColor,
                          )
                          .paddingOnly(bottom: 5))
                      .toList(),
                ).paddingOnly(left: 15),
                15.height,
                Row(
                  children: [
                    CardButtonWithIcon(
                      title: "Reschedule Appointment",
                      onCardTapped: () {},
                      icon: MyAssets.scheduleAppointmentIcon.buildSvg(),
                    ),
                    10.width,
                    CardButtonWithIcon(
                      title: "Pay for Appointment",
                      onCardTapped: () {},
                      icon: MyAssets.creditCardIcon.buildSvg(),
                    ),
                  ],
                ),
                15.height,
              ],
            ).toWhiteContainer(width: double.infinity, allPading: 12),
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                children: [
                  Expanded(
                    child: ShowFillButton(
                      maxHeight: 55,
                      title: "Cancel",
                      onPressed: () {},
                      backgroundColor: MyColors.redColor,
                    ),
                  ),
                  if (appointmentListModel.appointmentStatusID == 1) ...[
                    12.width,
                    Expanded(
                      child: ShowFillButton(
                        maxHeight: 55,
                        title: "Confirm",
                        onPressed: () {},
                        backgroundColor: MyColors.greenColor,
                      ),
                    ),
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}