import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart' show Icons, PopupMenuItem, showMenu, Colors;
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';

class DropdownWidget extends StatelessWidget {
  final String labelText;
  final String hintText;
  final List<String> dropdownItems;
  final String? selectedValue;
  final Function(String?)? onChange;
  final bool isEnable;
  final bool isBorderAllowed;
  final bool isAllowRadius;
  final EdgeInsetsGeometry? padding;
  final bool hasSelectionCustomIcon;
  final String? selectionCustomIcon;
  final String? leadingIcon;
  final Color? labelColor;

  const DropdownWidget(
      {Key? key,
      required this.labelText,
      required this.hintText,
      required this.dropdownItems,
      this.selectedValue,
      this.onChange,
      this.isEnable = true,
      this.isBorderAllowed = true,
      this.isAllowRadius = true,
      this.padding,
      this.hasSelectionCustomIcon = false,
      this.selectionCustomIcon,
      this.leadingIcon,
      this.labelColor})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    Widget content = Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [_buildLabelText(labelColor), _buildDropdown(context)],
    );

    return Container(
      padding: padding,
      alignment: Alignment.center, // This might need adjustment based on layout
      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
        color: Colors.white,
        borderRadius: isAllowRadius ? 15.h : null,
        side: isBorderAllowed ? BorderSide(color: const Color(0xffefefef), width: 1) : null,
      ),
      child: Row(
        // Wrap with a Row
        crossAxisAlignment: CrossAxisAlignment.center, // Align items vertically in the center
        children: [
          if (leadingIcon != null) ...[
            _buildLeadingIcon(),
            SizedBox(width: 3.h),
          ],
          Expanded(child: content),
        ],
      ),
    );
  }

  Widget _buildLeadingIcon() {
    return Container(
        height: 40.h,
        width: 40.h,
        margin: EdgeInsets.only(right: 10.h),
        padding: EdgeInsets.all(8.h),
        decoration: RoundedRectangleBorder().toSmoothCornerDecoration(borderRadius: 10.h, color: AppColors.greyColor),
        child: Utils.buildSvgWithAssets(icon: leadingIcon!));
  }

  Widget _buildLabelText(Color? labelColor) {
    return Text(
      labelText,
      style: TextStyle(
        fontSize: 12.fSize,
        fontWeight: FontWeight.w500,
        color: labelColor ?? Color(0xff898A8D),
        letterSpacing: -0.2,
        height: 18 / 12,
      ),
    );
  }

  Widget _buildDropdown(BuildContext context) {
    return GestureDetector(
      onTap: isEnable
          ? () async {
              final renderBox = context.findRenderObject() as RenderBox;
              final offset = renderBox.localToGlobal(Offset.zero);
              final selected = await showMenu<String>(
                context: context,
                position: RelativeRect.fromLTRB(
                  offset.dx,
                  offset.dy + renderBox.size.height,
                  offset.dx + renderBox.size.width,
                  0,
                ),
                items: dropdownItems
                    .map(
                      (e) => PopupMenuItem<String>(
                        value: e,
                        child: Text(
                          e,
                          style: TextStyle(
                            fontSize: 14.fSize,
                            height: 21 / 14,
                            fontWeight: FontWeight.w500,
                            letterSpacing: -0.2,
                          ),
                        ),
                      ),
                    )
                    .toList(),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              );

              if (selected != null && onChange != null) {
                onChange!(selected);
              }
            }
          : null,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Text(
              (selectedValue == null || selectedValue!.isEmpty) ? hintText : selectedValue!,
              textAlign: TextAlign.left,
              textDirection: TextDirection.ltr,
              style: TextStyle(
                fontSize: 14.fSize,
                height: 21 / 14,
                fontWeight: FontWeight.w500,
                color: (selectedValue != null && selectedValue!.isNotEmpty) ? const Color(0xff2E3039) : const Color(0xffB0B0B0),
                letterSpacing: -0.2,
              ),
            ),
          ),
          if (hasSelectionCustomIcon && selectionCustomIcon != null) Utils.buildSvgWithAssets(icon: selectionCustomIcon!) else const Icon(Icons.keyboard_arrow_down_outlined),
        ],
      ),
    );
  }
}