import 'package:dotted_border/dotted_border.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/page/confirmation/confirmation_page.dart';
import 'package:e_commerce_training/src/page/register/register_cubit.dart';
import 'package:e_commerce_training/src/util/navigation_util.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/custom_appbar.dart';
import 'package:e_commerce_training/src/widget/text_field.dart';
import 'package:e_commerce_training/src/widget/text_field_widget.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  late RegisterCubit _cubit;
  TextEditingController cardNumberController = TextEditingController();
  TextEditingController licenseNumberController = TextEditingController();

  @override
  void initState() {
    AppRepository repository = AppRepository();
    _cubit = RegisterCubit(repository);
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(context, R.string.manufacturer.tr()),
      body: BlocProvider(
        create: (BuildContext context) => _cubit,
        child: BlocConsumer<RegisterCubit, RegisterState>(
          listener: (context, state) {
            if (state is RegisterFailure) Util.showErrorSnackBar(context, state.error);
          },
          builder: (context, state) {
            return GestureDetector(
              onTap: () => Util.hideKeyboard(context),
              child: buildPage(context, state),
            );
          },
        ),
      ),
    );
  }

  Stack buildPage(BuildContext context, RegisterState state) {
    return Stack(
      children: [
        SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                buildText(title: R.string.card_number.tr()),
                SizedBox(height: 10),
                buildInput(controller: cardNumberController, hintText: R.string.enter_register.tr()),
                SizedBox(
                  height: 20,
                ),
                buildText(title: R.string.license_number.tr()),
                SizedBox(height: 10),
                buildInput(
                  controller: licenseNumberController,
                  hintText: R.string.enter_register.tr(),
                ),
                SizedBox(height: 20),
                buildText(title: R.string.picture.tr()),
                SizedBox(height: 20),
                buildInsertImage(width: 120.w, height: 120.w),
                SizedBox(height: 20),
                buildText(title: R.string.card_picture.tr()),
                SizedBox(height: 20),
                buildInsertImage(width: double.infinity, height: 180.h),
                SizedBox(height: 20),
                buildText(title: R.string.license_picture.tr()),
                SizedBox(height: 20),
                buildInsertImage(width: double.infinity, height: 180.h),
                SizedBox(
                  height: 120.h,
                )
              ],
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          child: InkWell(
            onTap: () {
              NavigationUtil.rootNavigatePage(
                context,
                ConfirmationPage(),
              );
            },
            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,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget buildInput({
    TextEditingController? controller,
    String? hintText,
  }) {
    return TextFieldCustom(
      autoFocus: false,
      controller: controller!,
      textInputAction: TextInputAction.next,
      keyboardType: TextInputType.number,
      hintText: hintText,
    );
  }

  Widget buildText({String? title}) {
    return 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,
              ),
            ),
          ]),
    );
  }

  Widget buildInsertImage({double? width, double? height}) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10),
      child: GestureDetector(
        onTap: () {
          _cubit.pickImageEvent();
        },
        child: Container(
          width: width,
          height: height,
          child: _cubit.image != null
              ? Center(
                  child: Image.file(
                    _cubit.image!,
                    width: width,
                    height: height,
                    fit: BoxFit.cover,
                  ),
                )
              : DottedBorder(
                  color: R.color.grey500,
                  radius: Radius.circular(5),
                  borderType: BorderType.RRect,
                  dashPattern: [3, 3],
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.image,
                          size: 30.h,
                          color: R.color.black.withOpacity(0.4),
                        ),
                        Text(
                          R.string.choose_image.tr(),
                          style: TextStyle(
                            fontSize: 15.sp,
                            color: R.color.black.withOpacity(0.5),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
        ),
      ),
    );
  }
}
