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';

class KwDropdown<R> extends StatefulWidget {
  final String? title;
  final String hintText;
  final KwDropDownItem<R>? selectedItem;
  final Iterable<KwDropDownItem<R>> items;
  final Function(R item) onSelected;
  final double horizontalPadding;
  final Color? backgroundColor;
  final Color borderColor;
  final bool showError;
  final String? helperText;

  const KwDropdown({
    super.key,
    required this.hintText,
    this.horizontalPadding = 0,
    required this.items,
    required this.onSelected,
    this.backgroundColor,
    this.borderColor = AppColors.grayTintStroke,
    this.title,
    this.selectedItem,
    this.showError = false,
    this.helperText,
  });

  @override
  State<KwDropdown<R>> createState() => _KwDropdownState<R>();
}

class _KwDropdownState<R> extends State<KwDropdown<R>> {
  KwDropDownItem<R>? _selectedItem;

  @override
  void initState() {
    _selectedItem = widget.selectedItem;
    super.initState();
  }

  Color _helperTextColor() {
    if (widget.showError) return AppColors.statusError;

    return AppColors.bgColorDark;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        if (widget.title != null)
          Padding(
            padding: const EdgeInsets.only(left: 16, bottom: 4),
            child: Text(
              widget.title!,
              style: AppTextStyles.bodyTinyReg.copyWith(
                color: AppColors.blackGray,
              ),
            ),
          ),
        KwPopupMenu(
          horizontalPadding: widget.horizontalPadding,
          fit: KwPopupMenuFit.expand,
          customButtonBuilder: _buildMenuButton,
          menuItems: [
            for (final item in widget.items)
              KwPopupMenuItem(
                title: item.title,
                icon: item.icon,
                onTap: () {
                  setState(() => _selectedItem = item);
                  widget.onSelected(item.data);
                },
              ),
          ],
        ),
        if (widget.helperText?.isNotEmpty == true) ...[
          const SizedBox(height: 4),
          Row(
            children: [
              const Gap(16),
              Text(
                widget.helperText!,
                style: AppTextStyles.bodyTinyReg.copyWith(
                  height: 1,
                  color: _helperTextColor(),
                ),
              ),
            ],
          ),
        ],
      ],
    );
  }

  Color _borderColor(bool isOpened) {
    if (isOpened) return AppColors.bgColorDark;

    if (widget.showError) return AppColors.statusError;

    return widget.borderColor;
  }

  Widget _buildMenuButton(BuildContext context, bool isOpened) {
    return Container(
      height: 48,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: widget.backgroundColor,
        borderRadius: BorderRadius.circular(24),
        border: Border.all(
          color: _borderColor(isOpened),
          width: 1,
        ),
      ),
      child: Row(
        children: [
          Expanded(
            child: Text(
              _selectedItem?.title ?? widget.hintText,
              style: AppTextStyles.bodyMediumReg.copyWith(
                color: _selectedItem == null
                    ? AppColors.blackGray
                    : AppColors.blackBlack,
              ),
            ),
          ),
          AnimatedRotation(
            duration: const Duration(milliseconds: 150),
            turns: isOpened ? -0.5 : 0,
            child: Assets.images.icons.caretDown.svg(
              width: 16,
              height: 16,
              colorFilter: const ColorFilter.mode(
                AppColors.darkBgInactive,
                BlendMode.srcIn,
              ),
            ),
          )
        ],
      ),
    );
  }
}

class KwDropDownItem<R> {
  final String title;
  final R data;
  final Widget? icon;

  const KwDropDownItem({required this.data, required this.title, this.icon});
}
