import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../app.dart';

class RegisterPage extends StatelessWidget {
  final ProfileController pc = Get.put(ProfileController());
  final VisibilityController vc = Get.put(VisibilityController());

  @override
  Widget build(BuildContext context) {
    return GetX<RegisterController>(
      init: RegisterController(),
      builder: (rc) => Scaffold(
        appBar: CustomAppbarWidget(),
        body: SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 1.sw,
              minHeight: 1.sh,
            ),
            child: IntrinsicHeight(
              child: Container(
                padding: EdgeInsets.only(left: 30.w, right: 30.w, top: 30.h),
                child: Form(
                  key: rc.formKey,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'register1'.tr,
                        style: AppTheme.subHeaderTxtStyle,
                      ),
                      AppTheme.appSizeDivider20H,
                      AppTheme.appColorDivider,

                      // name
                      AppTheme.appSizeDivider20H,
                      Text('name'.tr, style: AppTheme.styleColorC4C4),
                      SizedBox(height: 15.h),
                      MyTextFormField(
                        controller: rc.firstNameCtrl,
                        label: 'name'.tr,
                      ),

                      // surname
                      AppTheme.appSizeDivider20H,
                      Text('surname'.tr, style: AppTheme.styleColorC4C4),
                      SizedBox(height: 15.h),
                      MyTextFormField(
                        controller: rc.lastNameCtrl,
                        label: 'surname'.tr,
                      ),

                      // phone
                      AppTheme.appSizeDivider20H,
                      Text('phone_number'.tr, style: AppTheme.styleColorC4C4),
                      SizedBox(height: 15.h),
                      MyTextFormField(
                        controller: rc.phoneCtrl,
                        keyboardType: TextInputType.phone,
                        hasPrefixIcon: true,
                        label: 'phone_number'.tr,
                        inputFormatters: [maskFormatterPhone],
                      ),

                      /*AppTheme.appSizeDivider20H,
                      Text('Электронная почта', style: AppTheme.styleColorC4C4),
                      SizedBox(height: 15.h),
                      MyTextFormField(
                        controller: rc.passwordCtrl,
                        obscureText: true,
                      ),*/

                      // password
                      AppTheme.appSizeDivider20H,
                      Text('enter_password'.tr, style: AppTheme.styleColorC4C4),
                      SizedBox(height: 15.h),
                      MyTextFormField(
                        controller: rc.passwordCtrl,
                        label: 'enter_password'.tr,
                        suffix: PasswordVisibilityWidget(),
                        isPassword: true,
                        obscureText: vc.obscureText.value,
                      ),

                      /*AppTheme.appSizeDivider20H,
                      Text('Повторите пароль', style: AppTheme.styleColorC4C4),
                      SizedBox(height: 15.h),
                      MyTextFormField(
                        controller: rc.passwordCtrl,
                        obscureText: true,
                      ),*/

                      AppTheme.appSizeDivider20H,
                      AppTheme.appSizeDivider20H,
                      rc.isLoading.value
                          ? CustomLoader()
                          : ColoredButton(
                              title: 'register2'.tr,
                              callback: rc.register,
                              btnColor: ThemeColor.mainColor,
                            ),
                      SizedBox(height: 30.h),
                      Center(
                        child: Text(
                          'already_registered'.tr,
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: ThemeColor.color3A3A3A,
                          ),
                        ),
                      ),
                      AppTheme.appSizeDivider20H,
                      MyOutlinedButton(
                        title: 'login2'.tr,
                        btnColor: ThemeColor.mainColor,
                        txtColor: ThemeColor.mainColor,
                        callback: () {
                          debugPrint('navigate to login page');
                          pc.onPageChange(2);
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
