import 'package:flutter/material.dart';
import 'package:flutter_example_packages/base/di/app_di.dart';
import 'package:flutter_example_packages/extensions/keys_ext.dart';
import 'package:flutter_example_packages/pages/home/model.dart';
import 'package:flutter_example_packages/theme/colors.dart';
import 'package:flutter_example_packages/theme/radius.dart';
import 'package:flutter_example_packages/widgets/layouts/page_layout.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:scoped_model/scoped_model.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _hH = 0;
  final _header = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
          _hH = _header.getHeight() ?? 0;
          Future.delayed(const Duration(milliseconds: 100), () {
            setState(() {
              _hH = _header.getHeight() ?? 0;
            });
          });
          Future.delayed(const Duration(milliseconds: 200), () {
            setState(() {
              _hH = _header.getHeight() ?? 0;
            });
          });
        }));
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final localizations = AppLocalizations.of(context)!;

    return PageLayout(
      child: ScopedModel<HomeModel>(
        model: getIt<HomeModel>(),
        child: ScopedModelDescendant<HomeModel>(
          builder: (context, child, model) {
            return Stack(
              children: [
                Container(
                  height: _hH > 0 ? _hH : 0,
                  color: AppColors.primary,
                  width: double.infinity,
                  child: Center(
                    child: Align(
                      alignment: FractionalOffset.bottomRight,
                      child: Padding(
                        padding: const EdgeInsets.only(
                            left: 20, right: 20, top: 0, bottom: 40),
                        child: Opacity(
                          opacity: 0.3,
                          child: Image.asset(
                            'images/logo-head.png',
                            width: 250,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  key: _header,
                  width: double.infinity,
                  padding: const EdgeInsets.only(
                      left: 20, right: 20, top: 30, bottom: 120),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Welcome!",
                        textAlign: TextAlign.left,
                        style: theme.textTheme.titleLarge?.copyWith(
                          color: const Color(0xFF3c67b5),
                        ),
                      ),
                      const SizedBox(height: 50),
                      Text(
                        "In this application you can find 100500 plugins supporting Aurors OS. If it happens that something is missing for you, you can write to us or add it yourself.",
                        textAlign: TextAlign.left,
                        style: theme.textTheme.bodyLarge?.copyWith(
                          color: const Color(0xFF3c67b5),
                          height: 1.5,
                        ),
                      ),
                    ],
                  ),
                ),
                ListView.builder(
                  padding: EdgeInsets.only(top: _hH > 0 ? _hH - 16 : 0),
                  itemCount: 20,
                  itemBuilder: (context, index) {
                    final i = index;
                    return Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: i == 0
                            ? const BorderRadius.only(
                                topLeft: Radius.circular(20),
                                topRight: Radius.circular(20),
                              )
                            : null,
                      ),
                      child: Padding(
                        padding: i == 0
                            ? const EdgeInsets.only(
                                left: 20, right: 20, top: 20, bottom: 0)
                            : const EdgeInsets.symmetric(horizontal: 20),
                        child: Column(
                          children: [
                            Stack(
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(top: 10),
                                  child: Stack(
                                    children: [
                                      SizedBox(
                                        width: double.infinity,
                                        child: Card(
                                          child: Padding(
                                            padding: const EdgeInsets.all(20),
                                            child: Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  'battery_plus',
                                                  textAlign: TextAlign.left,
                                                  style: theme
                                                      .textTheme.titleSmall,
                                                ),
                                                const SizedBox(height: 10),
                                                Text(
                                                  'A Flutter plugin to access various information about the battery of the device the app is running on.',
                                                  textAlign: TextAlign.left,
                                                  style: theme
                                                      .textTheme.bodyMedium
                                                      ?.copyWith(
                                                          color: Colors.black
                                                              .withOpacity(
                                                                  0.6)),
                                                ),
                                                const SizedBox(height: 12),
                                                Divider(
                                                    height: 1,
                                                    color:
                                                        const Color(0xFF3c67b5)
                                                            .withOpacity(0.2)),
                                                const SizedBox(height: 12),
                                                Text(
                                                  'Version: 4.0.1',
                                                  textAlign: TextAlign.left,
                                                  style: theme.textTheme.caption
                                                      ?.copyWith(
                                                          color: const Color(
                                                                  0xFF3c67b5)
                                                              .withOpacity(
                                                                  0.7)),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                      Positioned.fill(
                                        child: Material(
                                          color: Colors.transparent,
                                          child: InkWell(
                                            customBorder:
                                                RoundedRectangleBorder(
                                              borderRadius: AppRadius.small,
                                            ),
                                            hoverColor: Colors.transparent,
                                            onTap: () => debugPrint("click"),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Align(
                                  alignment: FractionalOffset.topRight,
                                  child: Container(
                                    margin: const EdgeInsets.only(right: 16),
                                    decoration: BoxDecoration(
                                      color: i % 2 == 0
                                          ? Colors.orange
                                          : Colors.blueAccent,
                                      borderRadius: AppRadius.small,
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.all(6),
                                      child: Text(
                                        i % 2 == 0
                                            ? 'platform dependent'
                                            : 'platform independent',
                                        textAlign: TextAlign.left,
                                        style:
                                            theme.textTheme.caption?.copyWith(
                                          color: Colors.white,
                                          fontWeight: FontWeight.w100,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            const SizedBox(height: 20),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}