import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/store_info.dart';
import 'package:huixiang/utils/flutter_utils.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class EditPhoneWidget extends StatefulWidget {

  final StoreInfo storeInfo;
  final Function(String headMobile) mobileChange;

  EditPhoneWidget(this.storeInfo, this.mobileChange);

  @override
  State<StatefulWidget> createState() {
    return _EditPhoneWidget();
  }
}

class _EditPhoneWidget extends State<EditPhoneWidget> {
  bool isEdit = false;
  TextEditingController _vc;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _vc = TextEditingController(
        text: widget.storeInfo != null ? widget.storeInfo.headMobile : "");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        left: 16,
        right: 16,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Color(0x0D000000),
            offset: Offset(0, 3),
            blurRadius: 14,
            spreadRadius: 0,
          ),
        ],
        borderRadius: BorderRadius.circular(8),
      ),
      padding: EdgeInsets.symmetric(
        horizontal: 12.w,
        vertical: 15.h,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            S.of(context).yuliudianhua,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: MyFontWeight.regular,
              color: Color(0xFF4C4C4C),
            ),
          ),
          SizedBox(
            width: 50,
          ),
          Expanded(
            child: isEdit
                ? Container(
                    height: 25.h,
                    alignment: Alignment.centerRight,
                    child: TextField(
                      controller: _vc,
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: MyFontWeight.medium,
                        color: Color(0xFF4C4C4C),
                      ),
                      textAlign: TextAlign.right,
                      textAlignVertical: TextAlignVertical.center,
                      keyboardType: TextInputType.phone,
                      decoration: InputDecoration(
                        errorBorder: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        hintText: "",
                        hintStyle: TextStyle(
                          fontSize: 10.sp,
                          color: Color(0xFFA29E9E),
                        ),
                      ),
                      textInputAction: TextInputAction.next,
                      inputFormatters: [LengthLimitingTextInputFormatter(11)],
                      cursorColor: Colors.grey,
                    ),
                  )
                : Container(
                    height: 25.h,
                    alignment: Alignment.centerRight,
                    child: Text(
                      widget.storeInfo != null
                          ? widget.storeInfo.headMobile
                          : "",
                      overflow: TextOverflow.ellipsis,
                      textAlign: TextAlign.end,
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: MyFontWeight.regular,
                        color: Color(0xFF4C4C4C),
                      ),
                    ),
                  ),
          ),
          GestureDetector(
            onTap: () {
              String mobile = _vc.text;
              if (mobile != null && AppUtils.isPhone(mobile)) {
                widget.mobileChange(mobile);
                widget.storeInfo.headMobile = mobile;
              }
              setState(() {
                this.isEdit = !this.isEdit;
              });
            },
            child: Container(
              padding: EdgeInsets.all(8),
              child: isEdit
                  ? Icon(
                      Icons.check,
                      size: 14.w,
                      color: Color(0xFF32A060),
                    )
                  : Image.asset(
                      "assets/image/pen.webp",
                      height: 14.h,
                      width: 14.w,
                    ),
            ),
          ),
        ],
      ),
    );
  }
}