import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:gascom/constants/app_theme.dart';
import 'package:gascom/screens/nfc_screen.dart';
import 'package:gascom/screens/otp_provider_screen.dart';
import 'package:gascom/widgets/app_button.dart';
import 'package:pinput/pinput.dart';

class LogInScreen extends StatefulWidget {
  const LogInScreen({super.key});

  @override
  State<LogInScreen> createState() => _LogInScreenState();
}

class _LogInScreenState extends State<LogInScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 25),
          children: [
            const SizedBox(height: 150),
            Center(
              child: SizedBox(
                width: MediaQuery.sizeOf(context).width * 0.6,
                child: SvgPicture.asset(
                  "assets/svgs/logo.svg",
                  semanticsLabel: 'Home',
                ),
              ),
            ),
            const SizedBox(height: 50),
            Center(
              child: AutoSizeText(
                "مرحبا بكم في كازكوم، يرجى ادخال رقم الترخيص الخاص بصاحب المولدة",
                style: Theme.of(context).textTheme.bodyLarge,
                textAlign: TextAlign.center,
                minFontSize: 8,
              ),
            ),
            Center(
              child: AutoSizeText(
                "أو قم بمسح رمز QR الموجود على البطاقة",
                style: Theme.of(context).textTheme.bodyLarge,
                textAlign: TextAlign.center,
                minFontSize: 8,
              ),
            ),
            const SizedBox(height: 35),
            Row(
              children: [
                InkWell(
                  borderRadius: BorderRadius.circular(11),
                  onTap: () {
                    // TODO: Implement QR Code Scanner
                  },
                  child: Container(
                    width: 60,
                    height: 60,
                    padding: const EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(11),
                      border: Border.all(
                        color: AppTheme.textColor,
                        width: 2,
                      ),
                    ),
                    child: SvgPicture.asset(
                      "assets/svgs/camera.svg",
                      semanticsLabel: 'QR Code',
                    ),
                  ),
                ),
                const SizedBox(width: 15),
                Expanded(
                  child: Container(
                    padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 6),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(11),
                      border: Border.all(
                        color: AppTheme.textColor,
                        width: 2,
                      ),
                    ),
                    child: Directionality(
                      textDirection: TextDirection.ltr,
                      child: Pinput(
                        length: 5,
                        defaultPinTheme: PinTheme(
                          width: 30,
                          height: 35,
                          textStyle: Theme.of(context).textTheme.bodyLarge,
                          margin: const EdgeInsets.symmetric(horizontal: 5),
                          decoration: const BoxDecoration(
                            // color: AppTheme.textColor,
                            border: Border(
                              bottom: BorderSide(
                                color: AppTheme.textColor,
                                width: 1,
                              ),
                            ),
                          ),
                        ),
                        onCompleted: (value) {
                          Navigator.push(context, MaterialPageRoute(builder: (context) => OtpProviderScreen(
                            cardNumber: int.parse(value),
                          )));
                        },
                      ),
                    ),
                  ),
                ),
              ],
            ),

            const SizedBox(height: 50),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 180,
                  child: AppButton(
                    onPressed: () {
                      Navigator.push(context, MaterialPageRoute(
                        fullscreenDialog: true,
                        // builder: (context) => NewGeneratorScreen(),
                        builder: (context) => NfcScreen(),
                      ));
                    },
                    label: "مولـدة جـــديــدة",
                    isElevated: false
                  ),
                ),
              ],
            ),
          ],
        ),
      )
    );
  }
}