import 'dart:io';

import 'package:component_library/component_library.dart';
import 'package:flutter/material.dart';
import 'package:form_fields/form_fields.dart';
import 'package:reactive_forms/reactive_forms.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();
  }
  final form = FormGroup({
    'file_pem': FormControl<List<File>>(
      value: [],
      validators: [requiredFile],
    ),
  });

  @override
  Widget build(BuildContext context) {
    final theme = GolekTheme.of(context);
    return Scaffold(
      appBar: LandingAppBar(),
      body: SafeArea(
        child: ReactiveForm(
          formGroup: form,
          child: Column(
            children: [
              ReactiveValueListenableBuilder(
                formControlName: 'file_pem',
                builder: (context, control, child) {
                  return Container();
                },
              ),
              ReactiveInputFile(
                name: 'file_pem',
                allowMultiple: true,
              ),
              ElevatedButton(
                onPressed: () {
                  form.markAllAsTouched();
                  print(form.control('file_pem').value);
                  print(form.control('file_pem').hasErrors);
                  print(form.control('file_pem').errors);
                  print(form.control('file_pem').touched);
                  if (form.valid){
                    print("FORM IS VALID");
                  }
                },
                child: const Text('Submit'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
