import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/data/enums/state_status.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/widgets/profile_icon.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_input.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_phone_input.dart';
import 'package:krow/features/profile/domain/bloc/personal_info_bloc.dart';

class PersonalInfoForm extends StatefulWidget {
  const PersonalInfoForm({
    super.key,
  });

  @override
  State<PersonalInfoForm> createState() => _PersonalInfoFormState();
}

class _PersonalInfoFormState extends State<PersonalInfoForm> {
  final _firstNameController = TextEditingController();
  final _lastNameController = TextEditingController();
  final _phoneController = TextEditingController();
  // final _emailController = TextEditingController();
  late final _bloc = context.read<PersonalInfoBloc>();

  void _syncControllersWithState(PersonalInfoState state) {
    _firstNameController.text = state.firstName;
    _lastNameController.text = state.lastName;
    // _emailController.text = state.email;
    _phoneController.text = state.phoneNumber;
  }

  @override
  void initState() {
    super.initState();

    _syncControllersWithState(_bloc.state);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Gap(16),
        BlocBuilder<PersonalInfoBloc, PersonalInfoState>(
          buildWhen: (previous, current) =>
              previous.profileImageUrl != current.profileImageUrl,
          builder: (context, state) {
            return ProfileIcon(
              diameter: 96,
              onChange: (imagePath) {
                _bloc.add(UpdateProfileImage(imagePath));
              },
              imagePath: state.profileImagePath,
              imageUrl: state.profileImageUrl,
              imageQuality: 0,
            );
          },
        ),
        const Gap(24),
        BlocConsumer<PersonalInfoBloc, PersonalInfoState>(
          buildWhen: (previous, current) => previous.status != current.status,
          listenWhen: (previous, current) =>
              previous.isUpdateReceived != current.isUpdateReceived,
          listener: (_, state) {
            if (!state.isUpdateReceived) return;

            _syncControllersWithState(state);
          },
          builder: (context, state) {
            final bool isValidationFailed = state.status == StateStatus.error;
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Name', style: AppTextStyles.headingH3),
                const Gap(12),
                KwTextInput(
                  title: 'First Name',
                  hintText: 'Enter your first name',
                  controller: _firstNameController,
                  keyboardType: TextInputType.name,
                  onChanged: (firstName) {
                    _bloc.add(UpdateFirstName(firstName));
                  },
                ),
                const Gap(8),
                KwTextInput(
                  title: 'Last Name',
                  hintText: 'Enter your last name',
                  controller: _lastNameController,
                  keyboardType: TextInputType.name,
                  onChanged: (lastName) {
                    _bloc.add(UpdateLastName(lastName));
                  },
                ),
                // const Gap(8),
                // KwTextInput(
                //   title: 'Middle Name (optional)',
                //   hintText: 'Enter your middle name',
                //   controller: _middleNameController,
                //   keyboardType: TextInputType.name,
                //   onChanged: (middleName) {
                //     _bloc.add(UpdateMiddleName(middleName));
                //   },
                // ),
                const Gap(24),
                const Text('Phone Number', style: AppTextStyles.headingH3),
                const Gap(12),
                KwPhoneInput(
                  controller: _phoneController,
                  onChanged: (phoneNumber) {
                    _bloc.add(UpdatePhoneNumber(phoneNumber));
                  },
                ),

                // const Gap(24),
                // const Text('Email', style: AppTextStyles.headingH3),
                // const Gap(12),
                // KwTextInput(
                //   hintText: 'email@website.com',
                //   controller: _emailController,
                //   keyboardType: TextInputType.emailAddress,
                //   showError: isValidationFailed &&
                //       state.emailValidationError.isNotEmpty,
                //   helperText: state.emailValidationError,
                //   onChanged: (email) {
                //     _bloc.add(UpdateEmail(email));
                //   },
                // ),
              ],
            );
          },
        ),
        const Gap(40),
      ],
    );
  }
}
