import 'package:flutter/material.dart';
import 'package:flutter_example_packages/extensions/keys_ext.dart';
import 'package:flutter_example_packages/packages/packages.dart';
import 'package:flutter_example_packages/pages/home/model.dart';
import 'package:flutter_example_packages/pages/home/widgets/package_list_item.dart';
import 'package:flutter_example_packages/theme/colors.dart';
import 'package:flutter_example_packages/widgets/layouts/block_layout.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.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;
            });
          });
          Future.delayed(const Duration(milliseconds: 500), () {
            setState(() {
              _hH = _header.getHeight() ?? 0;
            });
          });
        }));
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final localizations = AppLocalizations.of(context)!;
    return BlockLayout<HomeModel>(builder: (context, child, model) {
      return Scaffold(
        body: 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.symmetric(
                      horizontal: 20,
                      vertical: 60,
                    ),
                    child: Opacity(
                      opacity: 0.2,
                      child: Image.asset(
                        'images/logo-head.png',
                        width: 250,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Container(
              key: _header,
              width: double.infinity,
              padding: const EdgeInsets.only(
                left: 20,
                right: 20,
                top: 60,
                bottom: 80,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    localizations.homeWelcomeTitle,
                    textAlign: TextAlign.left,
                    style: theme.textTheme.titleLarge?.copyWith(
                      color: AppColors.primaryDark,
                    ),
                  ),
                  const SizedBox(height: 50),
                  Text(
                    localizations.homeWelcomeText,
                    textAlign: TextAlign.left,
                    style: theme.textTheme.bodyLarge?.copyWith(
                      color: AppColors.primaryDark,
                      height: 1.5,
                    ),
                  ),
                ],
              ),
            ),
            ListView.builder(
              padding: EdgeInsets.only(top: _hH > 0 ? _hH - 16 : 0),
              itemCount: packages.length,
              itemBuilder: (context, index) {
                return PackageListItemWidget(
                  index: index,
                  item: packages[index],
                );
              },
            ),
          ],
        ),
      );
    });
  }
}