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

class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      child: Stack(
        children: [
          Positioned.fill(
            child: Image.asset(
              "assets/images/background.png",
              fit: BoxFit.fill,
            ),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            body: Row(
              children: [
                SizedBox(
                  width: 600,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const SizedBox(height: 66 / 2),
                      Container(
                        padding: const EdgeInsets.only(right: 60),
                        child: Image.asset("assets/images/vinno_logo.png"),
                      ),
                      Transform.translate(
                        offset: const Offset(0, -66),
                        child: Container(
                          padding: const EdgeInsets.only(right: 60),
                          child: Opacity(
                            opacity: 0.2,
                            child: Transform.flip(
                              flipY: true,
                              child:
                                  Image.asset("assets/images/vinno_logo.png"),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                const VerticalDivider(),
                Expanded(
                  child: Center(
                    child: Container(
                      width: 360,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          _AccountInput(
                            value: controller.state.account,
                            onChanged: (value) =>
                                controller.state.account = value,
                          ),
                          const SizedBox(height: 12),
                          _PasswordInput(
                            value: controller.state.password,
                            onChanged: (value) =>
                                controller.state.password = value,
                          ),
                          const SizedBox(height: 20),
                          SizedBox(
                            // width: 360,
                            width: 140,
                            height: 48,
                            child: ElevatedButton(
                              onPressed: () {
                                controller.onSubmit();
                              },
                              child: const Text("登 录"),
                              // style: ButtonStyle(
                              //   shape: MaterialStatePropertyAll(
                              //     RoundedRectangleBorder(
                              //       borderRadius: BorderRadius.circular(4),
                              //     ),
                              //   ),
                              // ),
                            ),
                          ),
                          const SizedBox(height: 20),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
            floatingActionButton: FloatingActionButton.small(
              child: const Icon(Icons.settings),
              onPressed: () {
                Get.toNamed("/login/gateway");
              },
            ),
          ),
        ],
      ),
    );
  }
}

class _AccountInput extends StatelessWidget {
  final String value;

  final ValueChanged<String> onChanged;

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

  @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);
      },
      keyboardType: TextInputType.name,
      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,
      ),
    );
  }
}

class _PasswordInput extends StatelessWidget {
  final String value;

  final ValueChanged<String> onChanged;

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

  @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),
      obscureText: true,
      onChanged: (value) {
        onChanged.call(value);
      },
      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,
      ),
    );
  }
}
