import 'package:desktopapp/widgets/components/link.dart';
import 'package:desktopapp/widgets/components/row_input.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class Step2 extends StatelessWidget {
  Step2({Key? key}) : super(key: key);

  final TextEditingController _clientIdController = TextEditingController();
  final TextEditingController _clientSecretController = TextEditingController();

  Widget buildContent(BuildContext context) {
    return Column(children: [
      const Padding(
        padding: EdgeInsets.symmetric(vertical: 20),
        child: Text('Étape 2: Récupération des cléfs Client',
            style: TextStyle(fontSize: 20)),
      ),
      const Text(
          'Pour pouvoir utiliser l\'application, il faut récupérer les clefs associées à l\'application créée juste avant.'),
      const Text(
          'Normalement, vous devez voir apparaître une page avec les champs comme dans l\'image ci-dessous.'),
      const Text('Sinon vous pouvez le retrouver avec le lien ci-dessous:'),
      const SizedBox(height: 10),
      const Link(
          uri: 'https://streamlabs.com/dashboard#/settings/api-settings'),
      const SizedBox(height: 20),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24.0),
        child: Image.asset('assets/images/client_app_keys.png'),
      ),
      const SizedBox(height: 20),
      const Text(
          'Pour récupérer les clefs, il faut remplir le formulaire ci-dessous avec les valeurs correspondantes à ceux sur le site:'),
      RowInput(label: 'Client ID', controller: _clientIdController),
      RowInput(label: 'Client Secret', controller: _clientSecretController),
      TextButton(
          onPressed: () async {
            final prefs = await SharedPreferences.getInstance();
            prefs.setString('client_id', _clientIdController.text.trim());
            prefs.setString(
                'client_secret', _clientSecretController.text.trim());
            showDialog(
                context: context,
                builder: (_) => AlertDialog(
                      title: const Text('Information'),
                      content: const Text(
                          'Les informations ont été correctement enregistrée.'),
                      actions: [
                        TextButton(
                            onPressed: () => Navigator.pop(context),
                            child: const Text('OK'))
                      ],
                    ));
          },
          child: const Text('Appliquer les changements')),
      const SizedBox(height: 20),
      const Text(
          'Une fois les données enregistrées, vous pouvez passez à l\'étape suivante.'),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
            child: FutureBuilder(
                future: SharedPreferences.getInstance(),
                builder: (BuildContext context,
                    AsyncSnapshot<SharedPreferences> snapshot) {
                  if (snapshot.hasData) {
                    final prefs = snapshot.data!;
                    _clientIdController.text =
                        prefs.getString('client_id') ?? '';
                    _clientSecretController.text =
                        prefs.getString('client_secret') ?? '';
                    return buildContent(context);
                  } else {
                    return const Center(child: CircularProgressIndicator());
                  }
                })),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              TextButton(
                  onPressed: () {}, child: const Text('Étape précédente')),
              TextButton(onPressed: () {}, child: const Text('Étape suivante'))
            ],
          ),
        )
      ],
    );
  }
}