import 'package:calendar_date_picker2/calendar_date_picker2.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/application/common/date_time_extension.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';

class KwCalendarWidget extends StatefulWidget {
  const KwCalendarWidget({
    super.key,
    required this.initialDate,
    required this.onDateSelected,
    this.firstDate,
    this.lastDate,
    this.currentDate,
  });

  final DateTime? initialDate;
  final DateTime? firstDate;
  final DateTime? lastDate;
  final DateTime? currentDate;
  final void Function(DateTime value) onDateSelected;

  @override
  State<KwCalendarWidget> createState() => _KwCalendarWidgetState();
}

class _KwCalendarWidgetState extends State<KwCalendarWidget> {
  final monthStr = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ];

  final selectedTextStyle = AppTextStyles.bodyMediumSmb.copyWith(
    color: AppColors.grayWhite,
  );

  final dayTextStyle = AppTextStyles.bodyMediumReg.copyWith(
    color: AppColors.bgColorDark,
  );

  @override
  Widget build(BuildContext context) {
    return CalendarDatePicker2(
      value: widget.initialDate == null ? [] : [widget.initialDate],
      config: CalendarDatePicker2Config(
        firstDate: widget.firstDate,
        lastDate: widget.lastDate,
        currentDate: widget.currentDate,
        hideMonthPickerDividers: false,
        modePickersGap: 0,
        controlsHeight: 80,
        calendarType: CalendarDatePicker2Type.single,
        selectedRangeHighlightColor: AppColors.tintGray,
        selectedDayTextStyle: selectedTextStyle,
        dayTextStyle: dayTextStyle,
        selectedMonthTextStyle: selectedTextStyle,
        selectedYearTextStyle: selectedTextStyle,
        selectedDayHighlightColor: AppColors.bgColorDark,
        centerAlignModePicker: true,
        monthTextStyle: dayTextStyle,
        weekdayLabelBuilder: _dayWeekBuilder,
        dayBuilder: _dayBuilder,
        monthBuilder: _monthBuilder,
        yearBuilder: _yearBuilder,
        controlsTextStyle: AppTextStyles.headingH3,
        nextMonthIcon: Assets.images.icons.caretRight.svg(width: 24),
        lastMonthIcon: Assets.images.icons.caretLeft.svg(width: 24),
        customModePickerIcon: Padding(
          padding: const EdgeInsets.only(left: 4),
          child: Assets.images.icons.caretDown.svg(),
        ),

        // modePickerBuilder: _controlBuilder,
      ),
      onValueChanged: (dates) {
        widget.onDateSelected.call(dates.first);
      },
    );
  }

  Widget? _monthBuilder({
    required int month,
    TextStyle? textStyle,
    BoxDecoration? decoration,
    bool? isSelected,
    bool? isDisabled,
    bool? isCurrentMonth,
  }) {
    return Center(
      child: Container(
        margin: const EdgeInsets.only(top: 16),
        height: 52,
        decoration: BoxDecoration(
          color: isSelected == true ? AppColors.bgColorDark : null,
          borderRadius: BorderRadius.circular(23),
          border: Border.all(
            color: AppColors.grayStroke,
            width: isSelected == true ? 0 : 1,
          ),
        ),
        child: Center(
          child: Text(
            monthStr[month - 1],
            style: isSelected == true
                ? AppTextStyles.bodyMediumMed
                    .copyWith(color: AppColors.grayWhite)
                : AppTextStyles.bodyMediumReg
                    .copyWith(color: AppColors.blackGray),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }

  Widget? _yearBuilder({
    required int year,
    TextStyle? textStyle,
    BoxDecoration? decoration,
    bool? isSelected,
    bool? isDisabled,
    bool? isCurrentYear,
  }) {
    return Container(
      margin: const EdgeInsets.only(top: 12),
      height: 52,
      decoration: BoxDecoration(
        color: isSelected == true ? AppColors.bgColorDark : null,
        borderRadius: BorderRadius.circular(23),
        border: Border.all(
          color: AppColors.grayStroke,
          width: isSelected == true ? 0 : 1,
        ),
      ),
      child: Center(
        child: Text(
          year.toString(),
          style: isSelected == true
              ? AppTextStyles.bodyMediumMed.copyWith(color: AppColors.grayWhite)
              : AppTextStyles.bodyMediumReg
                  .copyWith(color: AppColors.blackGray),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  Widget? _dayBuilder({
    required DateTime date,
    TextStyle? textStyle,
    BoxDecoration? decoration,
    bool? isSelected,
    bool? isDisabled,
    bool? isToday,
  }) {
    bool past = _isPast(date);
    var dayDecoration = BoxDecoration(
      color: isSelected == true ? AppColors.bgColorDark : null,
      borderRadius: BorderRadius.circular(20),
    );
    var dayTextStyle = AppTextStyles.bodyMediumReg.copyWith(
      color: past ? AppColors.blackCaptionText : AppColors.bgColorDark,
    );
    return Center(
      child: Container(
        margin: const EdgeInsets.only(left: 2, right: 2),
        alignment: Alignment.center,
        decoration: dayDecoration,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              date.day.toString(),
              style: isSelected == true ? selectedTextStyle : dayTextStyle,
              textAlign: TextAlign.center,
            ),
            const Gap(2),
          ],
        ),
      ),
    );
  }

  bool _isPast(DateTime date) {
    return date.isBefore(DateTime.now().tillDay());
  }

  Widget? _dayWeekBuilder({
    required int weekday,
    bool? isScrollViewTopHeader,
  }) {
    return Text(
      ['S', 'M', 'T', 'W', 'T', 'F', 'S'][weekday],
      style: AppTextStyles.bodyMediumSmb.copyWith(
        color: AppColors.bgColorDark,
      ),
      textAlign: TextAlign.center,
    );
  }
}
