import 'package:fis_theme/theme.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

const TEXT_FIELD_FILL_COLOR = Color.fromARGB(255, 251, 249, 249);
const TEXT_FIELD_BORDER_ERROR_COLOR = Color(0xFFEF5350);

class FBorderTextFormField extends StatefulWidget implements FWidget {
  FBorderTextFormField({
    Key? key,
    this.hintText,
    this.initialValue,
    this.focusNode,
    this.controller,
    this.onChanged,
    this.maxLength,
    this.obscureText = false,
    this.inputFormatters,
    this.inError = false,
    this.isShowVisibilityIcon = false,
  }) : super(key: key);
  final String? hintText;
  final String? initialValue;
  final FocusNode? focusNode;
  final TextEditingController? controller;
  final ValueChanged<String>? onChanged;
  final int? maxLength;
  final bool obscureText;
  final List<TextInputFormatter>? inputFormatters;
  final bool inError;
  final bool isShowVisibilityIcon;

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

  static InputBorder createDesktopBorder(bool inError) {
    final border = OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(8.sp)),
      borderSide: BorderSide(
        color: inError
            ? TEXT_FIELD_BORDER_ERROR_COLOR
            : FTheme.ins.data.colorScheme.line,
      ),
    );
    return border;
  }

  static EdgeInsets createDesktopContentPadding() {
    return EdgeInsets.symmetric(vertical: 16.sp, horizontal: 34.sp);
  }
}

class _FBorderTextFormFieldState extends State<FBorderTextFormField> {
  bool _obscureText = false;

  @override
  void initState() {
    _obscureText = widget.obscureText;
    if (mounted) {
      setState(() {});
    }
    super.initState();
  }

  @override
  FWidget build(BuildContext context) {
    if (kIsMobile) {
      final border = OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(4.sp)),
        borderSide: BorderSide(
          color: widget.inError
              ? TEXT_FIELD_BORDER_ERROR_COLOR
              : FTheme.ins.data.colorScheme.line,
        ),
      );
      return FTextFormField(
        initialValue: widget.initialValue,
        focusNode: widget.focusNode,
        controller: widget.controller,
        maxLength: widget.maxLength,
        obscureText: _obscureText,
        obscuringCharacter: '･',
        onChanged: widget.onChanged,
        inputFormatters: widget.inputFormatters,
        decoration: InputDecoration(
          fillColor: TEXT_FIELD_FILL_COLOR,
          filled: true,
          hintText: widget.hintText,
          hintStyle: TextStyle(
            fontSize: 14.sp,
            color: Colors.black54,
          ),
          alignLabelWithHint: true,
          counterText: '',
          isDense: true,
          isCollapsed: true,
          contentPadding:
              EdgeInsets.symmetric(vertical: 8.sp, horizontal: 26.sp),
          enabledBorder: border,
          focusedBorder: border,
          suffixIconConstraints: BoxConstraints.tight(Size(48.sp, 24.sp)),
          suffixIcon: widget.isShowVisibilityIcon
              ? GestureDetector(
                  onTap: () {
                    setState(() {
                      _obscureText = !_obscureText;
                    });
                  },
                  child: Icon(
                    _obscureText ? Icons.visibility_off : Icons.visibility,
                  ),
                )
              : null,
        ),
      );
    }

    final border = FBorderTextFormField.createDesktopBorder(widget.inError);
    return FTextFormField(
      initialValue: widget.initialValue,
      focusNode: widget.focusNode,
      controller: widget.controller,
      maxLength: widget.maxLength,
      obscureText: _obscureText,
      obscuringCharacter: '･',
      onChanged: widget.onChanged,
      inputFormatters: widget.inputFormatters,
      style: TextStyle(fontSize: 18.sp),
      decoration: InputDecoration(
        fillColor: TEXT_FIELD_FILL_COLOR,
        filled: true,
        hintText: widget.hintText,
        hintStyle: TextStyle(
          fontSize: 16.sp,
          color: Colors.black54,
        ),
        suffixIconConstraints: BoxConstraints.tight(Size(48.sp, 24.sp)),
        suffixIcon: widget.isShowVisibilityIcon
            ? GestureDetector(
                onTap: () {
                  setState(() {
                    _obscureText = !_obscureText;
                  });
                },
                child: Icon(
                  _obscureText ? Icons.visibility_off : Icons.visibility,
                ),
              )
            : null,
        alignLabelWithHint: true,
        counterText: '',
        contentPadding: FBorderTextFormField.createDesktopContentPadding(),
        enabledBorder: border,
        focusedBorder: border,
      ),
    );
  }
}
