import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';

class KwPhoneInput extends StatefulWidget {
  final String title;
  final String? error;
  final TextEditingController? controller;
  final void Function(String)? onChanged;
  final Color? borderColor;
  final FocusNode? focusNode;
  final bool showError;
  final String? helperText;
  final bool enabled;
  final String? initialValue;

  const KwPhoneInput({
    super.key,
    required this.title,
    this.initialValue,
    this.error,
    this.borderColor ,
    this.controller,
    this.onChanged,
    this.focusNode,
    this.showError = false,
    this.helperText,
    this.enabled = true,
  });

  @override
  State<KwPhoneInput> createState() => _KWPhoneInputState();
}

class _KWPhoneInputState extends State<KwPhoneInput> {
  late FocusNode _focusNode;

  @override
  void initState() {
    _focusNode = widget.focusNode ?? FocusNode();
    _focusNode.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  Color _borderColor() {
    if (!widget.enabled) {
      return AppColors.grayDisable;
    }

    if (_focusNode.hasFocus) {
      return AppColors.bgColorDark;
    }

    return widget.borderColor ?? AppColors.grayStroke;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildLabel(),
        const SizedBox(height: 4),
        _buildInputRow(),
        _buildError()
      ],
    );
  }

  Container _buildInputRow() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(
          Radius.circular(24),
        ),
        border: Border.all(
          color: _borderColor(),
          width: 1,
        ),
        color: Colors.transparent,
      ),
      child: Row(
        children: [
          _buildCountryPicker(),
          Expanded(
            child: TextField(
              focusNode: _focusNode,
              controller: widget.controller,
              onChanged: widget.onChanged,
              decoration: InputDecoration(
                hintText: 'enter_u_number'.tr(),
                hintStyle: AppTextStyles.bodyMediumReg.copyWith(
                  color: AppColors.blackGray,
                ),
                border: InputBorder.none,
                contentPadding: const EdgeInsets.symmetric(horizontal: 10),
                filled: true,
                fillColor: Colors.transparent,
              ),
              style: AppTextStyles.bodyMediumReg,
              keyboardType: TextInputType.phone,
            ),
          ),
        ],
      ),
    );
  }

  Padding _buildLabel() {
    return Padding(
      padding: const EdgeInsets.only(left: 16),
      child: Text(
        widget.title,
        style: AppTextStyles.bodyTinyReg.copyWith(
          color: AppColors.blackGray,
        ),
      ),
    );
  }

  Widget _buildCountryPicker() {
    return GestureDetector(
      onTap: () {
        Feedback.forTap(context);
        //TODO(Heorhii): Add country selection functionality
      },
      child: Row(
        children: [
          const Gap(12),
          const CircleAvatar(
            radius: 12,
            backgroundImage: NetworkImage(
              'https://flagcdn.com/w320/us.png',
            ),
          ),
          /// dont show arrow
          // const Gap(6),
          // const Icon(
          //   Icons.keyboard_arrow_down_rounded,
          //   color: AppColors.blackGray,
          //   opticalSize: 16,
          // ),
          const Gap(12),
          SizedBox(
            height: 48,
            child: VerticalDivider(
              width: 1,
              color: _borderColor(),
            ),
          ),
        ],
      ),
    );
  }

  _buildError() {
    return AnimatedSize(
      duration: const Duration(milliseconds: 200),
      alignment: Alignment.bottomCenter,
      child: Container(
        height: widget.error == null ? 0 : 24,
        clipBehavior: Clip.none,
        padding: const EdgeInsets.only(left: 16),
        alignment: Alignment.bottomLeft,
        child: Text(
          widget.error ?? '',
          style: AppTextStyles.bodyTinyMed.copyWith(
            color: AppColors.statusError,
          ),
        ),
      ),
    );
  }
}
