import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:go_router/go_router.dart';
import 'package:ocbo_esign_mobile/widgets/image_widget.dart';
import 'package:ocbo_esign_mobile/widgets/menu_widget.dart';
import 'package:ocbo_esign_mobile/widgets/text_widget.dart';

class IndexPage extends StatelessWidget {
  const IndexPage({super.key});

  @override
  Widget build(BuildContext context) {
    void gotoApproval() {
      context.push('/login');
    }

    void gotoValidation() {
      context.push('/validate');
    }

    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: LayoutBuilder(
        builder: (context, constraints) {
          final screenWidth = constraints.maxWidth;

          return Container(
            alignment: Alignment.center,
            height: MediaQuery.of(context).size.height,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color.fromRGBO(51, 34, 61, 1),
                  Color.fromRGBO(22, 33, 44, 1),
                  Color.fromRGBO(22, 33, 44, 1),
                  Color.fromRGBO(22, 33, 44, 1),
                  Color.fromRGBO(30, 56, 50, 1),
                ],
              ),
            ),
            child: Center(
              child: Column(
                children: [
                  const Gap(88),
                  const ImageWidget(imagePath: 'assets/logo.webp', size: 140, measureByHeight: false),
                  const Gap(24),
                  const TextWidget(
                    text: "OCBO e-Sign",
                    color: Color.fromARGB(255, 244, 243, 243),
                    bold: true,
                    size: 34,
                  ),
                  Padding(
                    padding: EdgeInsets.only(right: (screenWidth / 2) - 100),
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        TextWidget(text: "Mobile", color: Color.fromARGB(255, 244, 243, 243), bold: false, size: 16),
                      ],
                    ),
                  ),
                  const Gap(184),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    spacing: 32,
                    children: <Widget>[
                      MenuWidget(
                        icon: Icons.person,
                        text: 'Login',
                        onPressed: () {
                          gotoApproval();
                        },
                      ),
                      MenuWidget(
                        icon: Icons.qr_code,
                        text: 'Validate',
                        onPressed: () {
                          gotoValidation();
                        },
                      ),
                    ],
                  ),
                  const MaxGap(516),
                  const ImageWidget(imagePath: 'assets/pat-alcala.webp', size: 74, measureByHeight: false),
                  const Gap(4),
                  const TextWidget(
                    text: "Developed By: Pat Alcala",
                    color: Color.fromRGBO(244, 243, 243, 0.8),
                    bold: false,
                    size: 10,
                  ),
                  const Gap(24),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}