import 'package:component_library/component_library.dart';
import 'package:flutter/material.dart';
import 'landing_page/landing_app_bar.dart';

class LandingPage extends StatefulWidget {
  const LandingPage({Key? key}) : super(key: key);

  @override
  State<LandingPage> createState() => _LandingPageState();
}

class _LandingPageState extends State<LandingPage> {
  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      // TODO: check for new version of application
    });
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final theme = GolekTheme.of(context);

    return Scaffold(
      appBar: LandingAppBar(),
      body: SafeArea(
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: 497,
              decoration: BoxDecoration(
                color: theme.primaryMainColor,
                borderRadius: const BorderRadius.vertical(
                  bottom: Radius.circular(25),
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(
                right: 20,
                left: 20,
                bottom: 80,
              ),
              width: double.infinity,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Image.asset(
                    'assets/trucker_shipper.png',
                    package: 'features/landing_menu',
                    width: 300,
                    height: 200,
                  ),
                  const SizedBox(height: 12),
                  Text(
                    'Cari, Muat, Jalan.\nPraktis kan ?',
                    textAlign: TextAlign.center,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 2,
                    style: theme.textStyle.copyWith(
                      fontSize: FontSize.style24,
                      color: theme.neutral10Color,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 1,
                    ),
                  ),
                  const SizedBox(height: 21),
                  GestureDetector(
                    onTap: () async {},
                    child: Text(
                      'GolekTruk memberikan kebebasan\nberlogistik menggunakan budaya\nperusahaan sendiri.',
                      textAlign: TextAlign.center,
                      style: theme.textStyle.copyWith(
                        fontSize: FontSize.style14,
                        color: theme.neutral10Color,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                  SizedBox(height: 21),
                  Row(
                    children: [
                      CardProduct(
                        onClickInfo: () => {},
                        label: 'Cari Truk',
                        description: 'Pengirim Muatan',
                        assets: 'assets/box_shipper.png',
                        onTap: () {},
                      ),
                      const SizedBox(width: 14),
                      CardProduct(
                        onClickInfo: () => {},
                        label: 'Cari Muatan',
                        description: 'Penyedia Angkutan',
                        assets: 'assets/truk_trucker.png',
                        onTap: () async {},
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CardProduct extends StatelessWidget {
  final String assets;
  final String label;
  final String description;
  final Function() onTap;
  final Function() onClickInfo;

  const CardProduct({
    Key? key,
    required this.assets,
    required this.label,
    required this.description,
    required this.onTap,
    required this.onClickInfo,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = GolekTheme.of(context);
    return Expanded(
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: theme.neutral10Color,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.15),
              blurRadius: 10,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Material(
          borderRadius: BorderRadius.circular(10),
          child: InkWell(
            splashColor: theme.primaryMainColor,
            onTap: onTap,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Align(
                  alignment: Alignment.topRight,
                  child: GestureDetector(
                    onTap: onClickInfo,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(
                        Icons.info_outline,
                        color: theme.neutral70Color,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 8),
                Image(
                  image: AssetImage(assets, package: 'features/landing_menu'),
                  width: 131,
                  height: 100,
                  fit: BoxFit.contain,
                ),
                const SizedBox(height: 15),
                Text(
                  label,
                  style: theme.textStyle.copyWith(
                    fontSize: FontSize.style15,
                    color: theme.neutral100Color,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  description,
                  style: theme.textStyle.copyWith(
                    fontSize: FontSize.style12,
                    color: theme.neutral100Color,
                  ),
                ),
                const SizedBox(height: 14),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
