import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:namer_app/lang.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.primaryContainer,
      body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xffD9D9D9),
                  Color(0xff0F968E),
                  Color(0xff000000)
                ]),
            image: DecorationImage(
              image: AssetImage("assets/images/building.jpg"),
              fit: BoxFit.cover,
            )),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Row(
              children: [
                BackButton(color: Colors.white),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Kembali',
                      style: TextStyle(color: Colors.white),
                    ),
                    Text(
                      'pindai QR',
                      style: TextStyle(color: Colors.white),
                    ),
                  ],
                ),
                Expanded(child: Container()),
                Lang(),
              ],
            ),
            Expanded(
              child: Center(
                  child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'tel',
                    style: TextStyle(color: Color(0xffFF6600), fontSize: 48),
                  ),
                  Text(
                    'now',
                    style: TextStyle(color: Color(0xffFFFFFF), fontSize: 48),
                  ),
                ],
              )),
            ),
            Expanded(
                child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SizedBox(
                    width: 396,
                    height: 51,
                    child: TextField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Color(0xffFFFFFF))),
                          labelText: 'Nama Pengguna',
                          labelStyle: TextStyle(color: Color(0xffFFFFFF)),
                          filled: true,
                          fillColor: Colors.white.withOpacity(0.25)),
                      style: TextStyle(color: Color(0xffFFFFFF)),
                    ),
                  ),
                ),
                SizedBox(
                  width: 396,
                  height: 51,
                  child: TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xffFFFFFF))),
                        labelText: 'Kata Sandi',
                        labelStyle: TextStyle(color: Color(0xffFFFFFF)),
                        filled: true,
                        fillColor: Colors.white.withOpacity(0.25)),
                    style: TextStyle(color: Color(0xffFFFFFF)),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: SizedBox(
                    width: 396,
                    height: 61,
                    child: ElevatedButton(
                      onPressed: () => context.go('/list'),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Color(0xff078C84).withOpacity(0.76),
                        side: BorderSide(color: Colors.white),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12.0),
                        ),
                      ),
                      // style: ButtonStyle(
                      //     backgroundColor:
                      //         MaterialStateProperty.all(Color(0xff078C84)),
                      //     foregroundColor:
                      //         MaterialStateProperty.all<Color>(Colors.black),
                      //     shape:
                      //         MaterialStateProperty.all<RoundedRectangleBorder>(
                      //             RoundedRectangleBorder(
                      //       borderRadius: BorderRadius.circular(10),
                      //     ))),
                      child: Text(
                        'Masuk',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
                Text(
                  'Frisian Flag Indonesia, Tbk.',
                  style: TextStyle(color: Colors.white),
                ),
              ],
            )),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Text('Kebijakan Privasi',
                      style: TextStyle(
                          fontSize: 16,
                          decoration: TextDecoration.underline,
                          fontWeight: FontWeight.w400,
                          color: Colors.white)),
                  Text('Versi 4.0.0.0',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                        color: Colors.white,
                      ))
                ],
              ),
            ),
            // Container(
            //   color: Theme.of(context).colorScheme.primaryContainer,
            // )
          ],
        ),
      ),
    );
  }
}