import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:anyway/presentation/providers/onboarding_state_provider.dart';
import 'package:anyway/presentation/widgets/onboarding_card.dart';



class OnboardingAgreementCard extends ConsumerStatefulWidget {
  final String title;
  final String description;
  final String imagePath;
  final String agreementTextPath;
  final ValueChanged<bool> onAgreementChanged;


  const OnboardingAgreementCard({
    super.key,
    required this.title,
    required this.description,
    required this.imagePath,
    required this.agreementTextPath,
    required this.onAgreementChanged
  });

  @override
  ConsumerState<OnboardingAgreementCard> createState() => _OnboardingAgreementCardState();

}

class _OnboardingAgreementCardState extends ConsumerState<OnboardingAgreementCard> {

  // @override
  // void initState() {
  //   super.initState();
  //   // You can use ref here if needed in initState
  // }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          OnboardingCard(title: widget.title, description: widget.description, imagePath: widget.imagePath),
          const Padding(padding: EdgeInsets.only(top: 20)),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // The checkbox of the agreement
              FutureBuilder(
                future: ref.read(onboardingStateProvider.future),
                builder: (context, snapshot) {
                  bool agreed = false;
                  if (snapshot.hasData) {
                    agreed = snapshot.data!;
                  }
                  return Checkbox(
                    value: agreed,
                    onChanged: (bool? value) {
                      if (value != null) {
                        widget.onAgreementChanged(value);
                      }
                    },
                    activeColor: Colors.white,
                    checkColor: Colors.black,
                  );
                },
              ),

              // The text of the agreement
              Text(
                "I agree to the ",
                style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                  color: Colors.white,
                ),
              ),

              // The clickable text of the agreement that shows the agreement text
              GestureDetector(
                onTap: () {
                  // show a dialog with the agreement text
                  showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        scrollable: true,
                        content: FutureBuilder(
                          future: DefaultAssetBundle.of(context).loadString(widget.agreementTextPath),
                          builder: (context, snapshot) {
                            if (snapshot.hasData) {
                              return MarkdownBody(
                                data: snapshot.data.toString(),
                              );
                            } else {
                              return const CircularProgressIndicator();
                            }

                          },
                        )
                      );
                    }
                  );

                },
                child: Text(
                  "Terms of Service (click to view)",
                  style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}