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

class LoginGatewayPage extends GetView<LoginGatewayController> {
  const LoginGatewayPage({super.key});

  @override
  Widget build(BuildContext context) {
    final FocusNode gatewayFocusNode = FocusNode();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text("服务设置"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 420,
            child: _GatewayInput(
              value: controller.state.gateway,
              focusNode: gatewayFocusNode,
              onChanged: (String value) {
                controller.state.gateway = value;
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: ElevatedButton(
              child: const Text("保 存"),
              onPressed: () {
                gatewayFocusNode.unfocus();
                controller.onSubmit();
              },
            ),
          )
        ],
      ),
    );
  }
}

class _GatewayInput extends StatelessWidget {
  final String value;

  final ValueChanged<String> onChanged;
  final FocusNode? focusNode;

  const _GatewayInput({
    super.key,
    required this.value,
    required this.onChanged,
    this.focusNode,
  });

  @override
  Widget build(BuildContext context) {
    final border = OutlineInputBorder(
      borderRadius: const BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(
        color: Theme.of(context).primaryColor,
      ),
    );
    return TextField(
      controller: TextEditingController(text: value),
      onChanged: (value) {
        onChanged.call(value);
      },
      focusNode: focusNode,
      decoration: InputDecoration(
        fillColor: Colors.white,
        filled: true,
        hintText: "请输入服务地址",
        hintStyle: const TextStyle(
          fontSize: 14,
          color: Colors.black54,
        ),
        alignLabelWithHint: true,
        counterText: '',
        isDense: true,
        isCollapsed: true,
        contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 26),
        enabledBorder: border,
        focusedBorder: border,
      ),
    );
  }
}
