import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.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';
import 'package:krow/core/presentation/widgets/ui_kit/kw_popup_menu.dart';

const reasons = {
  'sick_leave': 'sick_leave',
  'vacation ': 'vacation',
  'other': 'other_specify',
};

class CancelReasonDropdown extends StatelessWidget {
  final String? selectedReason;
  final Function(String reason) onReasonSelected;

  const CancelReasonDropdown(
      {super.key,
      required this.selectedReason,
      required this.onReasonSelected});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: buildReasonInput(context, selectedReason),
    );
  }

  List<Widget> buildReasonInput(BuildContext context, String? selectedReason) {
    return [
      const Gap(24),
      Row(
        children: [
          const Gap(16),
          Text(
            'reason'.tr(),
            style:
                AppTextStyles.bodyTinyReg.copyWith(color: AppColors.blackGray),
          ),
        ],
      ),
      const Gap(4),
      KwPopupMenu(
          horizontalPadding: 40,
          fit: KwPopupMenuFit.expand,
          customButtonBuilder: (context, isOpened) {
            return _buildMenuButton(isOpened, selectedReason);
          },
          menuItems: [
            ...reasons.entries
                .map((e) => _buildMenuItem(context, e, selectedReason ?? ''))
          ])
    ];
  }

  Container _buildMenuButton(bool isOpened, String? selectedReason) {
    return Container(
      height: 48,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: AppColors.grayWhite,
        borderRadius: BorderRadius.circular(24),
        border: Border.all(
            color: isOpened ? AppColors.bgColorDark : AppColors.grayTintStroke,
            width: 1),
      ),
      child: Row(
        children: [
          Expanded(
              child: Text(
            reasons[selectedReason]?.tr() ?? 'select_reason_from_list'.tr(),
            style: AppTextStyles.bodyMediumReg.copyWith(
                color: selectedReason == null
                    ? AppColors.blackGray
                    : AppColors.blackBlack),
          )),
        ],
      ),
    );
  }

  KwPopupMenuItem _buildMenuItem(BuildContext context,
      MapEntry<String, String> entry, String selectedReason) {
    return KwPopupMenuItem(
      title: entry.value.tr(),
      onTap: () {
        onReasonSelected(entry.key);
      },
      icon: Container(
        height: 16,
        width: 16,
        decoration: BoxDecoration(
          color: selectedReason != entry.key ? null : AppColors.bgColorDark,
          shape: BoxShape.circle,
          border: selectedReason == entry.key
              ? null
              : Border.all(color: AppColors.grayTintStroke, width: 1),
        ),
        child: selectedReason == entry.key
            ? Center(
                child: Assets.images.icons.check.svg(
                height: 10,
                width: 10,
                colorFilter: const ColorFilter.mode(
                    AppColors.grayWhite, BlendMode.srcIn),
              ))
            : null,
      ),
      textStyle: AppTextStyles.bodySmallMed,
    );
  }
}
