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 = [
  'Hours didn’t Match',
  'Calculation Issue',
  'Other (Please specify)',
];

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

  const InvoiceReasonDropdown(
      {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(
            'Select reason',
            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
                .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(
            selectedReason ?? 'Select reason from a list',
            style: AppTextStyles.bodyMediumReg.copyWith(
                color: selectedReason == null
                    ? AppColors.blackGray
                    : AppColors.blackBlack),
          )),
        ],
      ),
    );
  }

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