import 'package:calendar_date_picker2/calendar_date_picker2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:muaawana/config/style.dart';
import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart';

import '../../../config/app_constant.dart';
import '../../../config/lang_enum.dart';
import '../../../config/provider.dart';
import '../../../config/size.dart';
import '../../../providers/language_provider.dart';
import '../../../providers/service_details_provider.dart';
import '../../../utils/text_style.dart';
import '../../../utils/text_widget.dart';
import '../../../widgets/custom_app_bar.dart';
import '../../../widgets/custom_botton_widget.dart';

class DateTimeScreen extends StatefulWidget {
  final bool isModify;

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

  @override
  State<DateTimeScreen> createState() => _DateTimeScreenState();
}

class _DateTimeScreenState extends State<DateTimeScreen> {
  final hm = SizeConfig.heightMultiplier;
  final wm = SizeConfig.widthMultiplier;
  final tm = SizeConfig.textMultiplier;

  @override
  Widget build(BuildContext context) {
    final langProvider = Provider.of<LanguageProvider>(context);
    final serviceDetailsProvider = Provider.of<ServiceDetailsProvider>(context);
    return Scaffold(
      backgroundColor: AppStyle.appBackground,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const CustomAppBar(
            title: 'Date & Time',
            thirdWidget: true,
          ),
          SizedBox(height: hm * 6),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: wm * 10),
            child: Card(
              child: CalendarDatePicker2(
                config: CalendarDatePicker2Config(
                  calendarType: CalendarDatePicker2Type.single,
                  weekdayLabels: langProvider.currentLangCode == Language.en
                      ? ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
                      : [
                          'الأحد',
                          'الإثنين',
                          'الثلاثاء',
                          'الأربعاء',
                          'الخميس',
                          'الجمعة',
                          'السبت'
                        ],
                  weekdayLabelTextStyle:
                      tS("lato", 12, FontWeight.normal, AppStyle.textCategGrey),
                  dayTextStyle:
                      tS("lato", 13, FontWeight.normal, AppStyle.black),
                  dayBorderRadius: BorderRadius.circular(10),
                  selectedDayHighlightColor: AppStyle.yellowUnderline,
                  selectedDayTextStyle: const TextStyle(
                    color: AppStyle.black,
                  ),
                ),
                value: widget.isModify
                    ? [serviceDetailsProvider.dateIsPicked]
                    : [serviceDetailsProvider.dateIsPicked],
                onValueChanged: (dates) {
                  serviceDetailsProvider.setDate(dates[0]!);
                },
              ),
            ),
          ),
          SizedBox(
            height: hm * 4,
            width: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SvgPicture.asset(
                  Consts.calendarIcon,
                  height: 14,
                ),
                Padding(
                  padding: const EdgeInsetsDirectional.only(start: 4.0),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 2.0),
                    child: Txt(
                      text: serviceDetailsProvider.dateString,
                      style: tS(
                        "lato_bold",
                        11,
                        FontWeight.bold,
                        Colors.transparent,
                        textDecoration: TextDecoration.underline,
                        decorationColor: AppStyle.textCategGrey,
                        shadows: const [
                          Shadow(
                            offset: Offset(0, -3),
                            color: AppStyle.black,
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding:
                EdgeInsets.symmetric(vertical: hm * 3, horizontal: wm * 10),
            child: Txt(
              text: "Select Time",
              style: tS(
                "lato_bold",
                14,
                FontWeight.bold,
                AppStyle.black,
              ),
            ),
          ),
          SizedBox(
            height: hm * 15,
            width: double.infinity,
            child: TimePickerSpinner(
              is24HourMode: false,
              normalTextStyle: tS(
                "lato_bold",
                12,
                FontWeight.bold,
                AppStyle.textCategGrey,
              ),
              highlightedTextStyle: tS(
                "lato_bold",
                14,
                FontWeight.bold,
                Colors.transparent,
                textDecoration: TextDecoration.underline,
                decorationColor: AppStyle.yellowUnderline,
                shadows: const [
                  Shadow(
                    offset: Offset(0, -2),
                    color: AppStyle.primary,
                  )
                ],
              ),
              spacing: 15,
              itemHeight: 25,
              isForce2Digits: true,
              onTimeChange: (time) {
                serviceDetailsProvider.setTime(time);
              },
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Padding(
              padding: EdgeInsets.only(top: hm * 4, bottom: hm),
              child: GestureDetector(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: const CustomButtonWidget(
                  height: 35,
                  width: 200,
                  borderRadius: 28,
                  fontSize: 15,
                  fillColor: AppStyle.buttonBlue,
                  borderColor: AppStyle.buttonBlue,
                  textColor: AppStyle.white,
                  text: 'Save',
                  fontFamily: 'lato-regular',
                  fontWeight: FontWeight.normal,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}