import 'package:flutter/material.dart';
import 'package:ju_learn/main.dart';

// ignore: must_be_immutable
class QuizPageBrowse extends StatefulWidget {
  Vault v;
  QuizPageBrowse(this.v, {super.key});

  @override
  // ignore: no_logic_in_create_state, library_private_types_in_public_api
  _QuizPageBrowseState createState() => _QuizPageBrowseState(v);
}

class _QuizPageBrowseState extends State<QuizPageBrowse> {
  int qI = 0;
  late Question _currentQuestion;
  Vault v;
  _QuizPageBrowseState(this.v) {
    _currentQuestion = v.questions[0];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Browsing: ${v.name}'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Align(
              alignment: Alignment.center,
              child: Text("${qI+1}/${v.questions.length}"),
            ),
            Text(
              _currentQuestion.quest,
              style: const TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 20.0),
            ..._currentQuestion.answers.map((option) => Container(
                margin: const EdgeInsets.symmetric(vertical: 8.0),
                child: FilledButton(
                    onPressed: () {},
                    style: FilledButton.styleFrom(
                        padding: const EdgeInsets.all(16.0),
                        backgroundColor: _currentQuestion.correct ==
                                _currentQuestion.answers.indexOf(option)
                            ? Colors.green
                            : Colors.red),
                    child: Text(option)))),
            Text(
              _currentQuestion.explanation,
              style: const TextStyle(
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
              ),
            )
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 12),
        child: Row(
          children: [
            FloatingActionButton(
              onPressed: () {
                if (qI > 0) {
                  qI--;
                } else {
                  qI = v.questions.length - 1;
                }
                setState(() {
                  _currentQuestion = v.questions[qI];
                });
              },
              child: const Icon(Icons.chevron_left),
            ),
            const Spacer(),
            FloatingActionButton(
              onPressed: () {
                if (qI < v.questions.length - 1) {
                  qI++;
                } else {
                  qI = 0;
                }
                setState(() {
                  _currentQuestion = v.questions[qI];
                });
              },
              child: const Icon(Icons.chevron_right),
            ),
          ],
        ),
      ),
    );
  }
}