import 'package:dropdown_search/dropdown_search.dart';
import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/repository/app_repository.dart';
import 'package:e_commerce_training/src/model/response/city_response.dart';
import 'package:e_commerce_training/src/page/register_member_ship/register_member_ship_cubit.dart';
import 'package:e_commerce_training/src/page/register_member_ship/register_member_ship_state.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/pending_action.dart';
import 'package:e_commerce_training/src/widget/text_field.dart';
import 'package:easy_localization/src/public_ext.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class RegisterMemberShipPage extends StatefulWidget {
  @override
  _RegisterMemberShipPageState createState() => _RegisterMemberShipPageState();
}

class _RegisterMemberShipPageState extends State<RegisterMemberShipPage> {
  TextEditingController controllerName = TextEditingController();
  TextEditingController controllerAddress = TextEditingController();
  TextEditingController controllerEmail = TextEditingController();
  TextEditingController controllerPostalCode = TextEditingController();
  TextEditingController controllerBirthPlace = TextEditingController();
  TextEditingController controllerHobby = TextEditingController();
  TextEditingController controllerInvitorPhone = TextEditingController();
  RefreshController _refreshController = RefreshController();
  late RegisterMemberShipCubit cubit;

  @override
  void initState() {
    // TODO: implement initState
    AppRepository repository = AppRepository();
    cubit = RegisterMemberShipCubit(repository);
    cubit.getCity();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RegisterMemberShip"),
      ),
      body: BlocProvider(
        create: (context) => cubit,
        child: BlocConsumer<RegisterMemberShipCubit, RegisterMemberShipState>(
          listener: (context, state) {
            if (state is RegisterMemberShipFailure) Util.showErrorSnackBar(context, state.error!);
            if (!(state is RegisterMemberShipLoading)) _refreshController.refreshCompleted();
            // TODO: implement listener
          },
          builder: (context, state) {
            return GestureDetector(
              onTap: () => Util.hideKeyboard(context),
              child: buildPage(context, state),
            );
          },
        ),
      ),
    );
  }

  Widget buildPage(BuildContext context, RegisterMemberShipState state) {
    return Stack(
      children: [
        SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            children: [
              SizedBox(height: 40),
              Center(
                child: Text(
                  R.string.fill_up_your_information.tr(),
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.w600,
                    color: R.color.black,
                  ),
                ),
              ),
              SizedBox(height: 20),
              buildInput(
                title: R.string.name_register.tr(),
                controller: controllerName,
                hintText: R.string.enter_your_name.tr(),
                inputType: TextInputType.text,
              ),
              SizedBox(height: 20),
              buildInput(
                title: R.string.address_register.tr(),
                controller: controllerAddress,
                hintText: R.string.enter_your_address.tr(),
                inputType: TextInputType.text,
              ),
              SizedBox(height: 20),
              buildInput(
                title: R.string.email_register.tr(),
                controller: controllerEmail,
                hintText: R.string.enter_your_email.tr(),
                inputType: TextInputType.emailAddress,
              ),
              SizedBox(height: 20),
              buildInput(
                title: R.string.postal_code.tr(),
                controller: controllerPostalCode,
                hintText: R.string.enter_postal_code.tr(),
                inputType: TextInputType.text,
              ),
              SizedBox(height: 20),
              buildInputProvince(),
              SizedBox(height: 20),
              buildInputClub(),
              SizedBox(height: 20),
              buildInputBloodType(),
              SizedBox(height: 20),
              buildInput(
                title: R.string.birth_place.tr(),
                controller: controllerBirthPlace,
                hintText: R.string.input_date.tr(),
                inputType: TextInputType.datetime,
              ),
              SizedBox(height: 20),
              buildInput(
                title: R.string.hobby.tr(),
                controller: controllerHobby,
                hintText: R.string.enter_your_hobbyy.tr(),
                inputType: TextInputType.text,
              ),
              SizedBox(height: 20),
              buildInput(
                title: R.string.invitor_phone_number.tr(),
                controller: controllerInvitorPhone,
                hintText: R.string.enter_invitor_phone_number.tr(),
                inputType: TextInputType.phone,
              ),
              SizedBox(height: 140.h),
            ],
          ),
        ),
        Positioned(
          left: 0,
          bottom: 0,
          child: Container(
              height: 120.h,
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
                color: R.color.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              child: Center(
                child: Container(
                  margin: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: Colors.deepOrangeAccent,
                  ),
                  child: Center(
                    child: Text(
                      R.string.continue_register.tr(),
                      style: TextStyle(
                        fontSize: 24.sp,
                        fontWeight: FontWeight.w500,
                        color: R.color.white,
                      ),
                      textAlign: TextAlign.center,
                      maxLines: 2,
                    ),
                  ),
                ),
              )),
        ),
        Visibility(
          visible: state is RegisterMemberShipLoading,
          child: PendingAction(),
        ),
      ],
    );
  }

  Widget buildInput({
    String? title,
    String? hintText,
    TextEditingController? controller,
    TextInputType? inputType,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        RichText(
          text: TextSpan(
              text: title,
              style: TextStyle(
                fontSize: 18.sp,
                color: R.color.gray,
                fontWeight: FontWeight.w600,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: R.string.star.tr(),
                  style: TextStyle(
                    fontSize: 18.sp,
                    color: R.color.orange,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ]),
        ),
        SizedBox(height: 10),
        TextFieldCustom(
          autoFocus: false,
          controller: controller!,
          textInputAction: TextInputAction.next,
          keyboardType: inputType!,
          hintText: hintText,
        )
      ],
    );
  }

  Widget buildInputProvince() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        RichText(
          text: TextSpan(
              text: R.string.province.tr(),
              style: TextStyle(
                fontSize: 18.sp,
                color: R.color.gray,
                fontWeight: FontWeight.w600,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: R.string.star.tr(),
                  style: TextStyle(
                    fontSize: 18.sp,
                    color: R.color.orange,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ]),
        ),
        SizedBox(height: 10),
        DropdownSearch<CityData>(
          hint: R.string.choose,
          mode: Mode.MENU,
          items: cubit.listCity,
          //label: R.string.choose.tr(),
          selectedItem: cubit.selectedCity,
          dropdownSearchBaseStyle: TextStyle(fontSize: 16.sp, color: R.color.black),
          onFind: (String? filter) async => cubit.searchCity(filter),
          itemAsString: (CityData? data) => data?.cityName ?? cubit.shippingCityName,
          onChanged: (CityData? data) => cubit.selectCity(data),
        )
      ],
    );
  }

  Widget buildInputClub() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        RichText(
          text: TextSpan(
              text: R.string.club.tr(),
              style: TextStyle(
                fontSize: 18.sp,
                color: R.color.gray,
                fontWeight: FontWeight.w600,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: R.string.star.tr(),
                  style: TextStyle(
                    fontSize: 18.sp,
                    color: R.color.orange,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ]),
        ),
        SizedBox(height: 10),
        DropdownSearch(
          hint: R.string.choose,
          mode: Mode.MENU,
          // items: _cubit.listWard,
          //label: R.string.choose.tr(),
          //selectedItem: _cubit.selectedWard,
          dropdownSearchBaseStyle: TextStyle(fontSize: 16.sp, color: R.color.black),
          //onFind: (String? filter) async => _cubit.searchWard(filter),
          // itemAsString: (WardData? data) => data?.wardName ?? _cubit.shippingWardName,
          //onChanged: (WardData? data) => _cubit.selectWard(data),
        )
      ],
    );
  }

  Widget buildInputBloodType() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        RichText(
          text: TextSpan(
              text: R.string.blood_type.tr(),
              style: TextStyle(
                fontSize: 18.sp,
                color: R.color.gray,
                fontWeight: FontWeight.w600,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: R.string.star.tr(),
                  style: TextStyle(
                    fontSize: 18.sp,
                    color: R.color.orange,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ]),
        ),
        SizedBox(height: 10),
        DropdownSearch(
          hint: R.string.choose,
          mode: Mode.MENU,
          // items: _cubit.listWard,
          //label: R.string.choose.tr(),
          //selectedItem: _cubit.selectedWard,
          dropdownSearchBaseStyle: TextStyle(fontSize: 16.sp, color: R.color.black),
          //onFind: (String? filter) async => _cubit.searchWard(filter),
          // itemAsString: (WardData? data) => data?.wardName ?? _cubit.shippingWardName,
          //onChanged: (WardData? data) => _cubit.selectWard(data),
        )
      ],
    );
  }
}
