mnemo_cards/lib/features/tests/test_widgets/input_buttons_test.dart

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mnemo_cards/features/tests/test_manager.dart';
import 'package:mnemo_cards/features/tests/test_widgets/test_image.dart';
import 'package:mnemo_cards_common/mnemo_cards_common.dart';

import '../../../di/locator.dart';
import '../../../widgets/game_card_widget.dart';
import '../question_states/input_buttons_test_state.dart';
import 'test_button.dart';

class InputButtonsTestWidget extends StatelessWidget {
  final InputButtonsTestQuestionBody model;

  bool get isCorrect => state.answer.join() == model.answer;

  InputButtonsTestState get state =>
      manager.getState(model.id!) as InputButtonsTestState;

  TestManager get manager => locator.testManager;

  InputButtonsTestWidget(this.model, {super.key});

  Widget _letter(BuildContext context, String text) => Padding(
        padding: const EdgeInsets.all(4.0),
        child: Material(
          child: Container(
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.0),
              boxShadow: const [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 4.0,
                ),
              ],
            ),
            child: Text(
              text,
              style: Theme.of(context).textTheme.titleLarge,
            ),
          ),
        ),
      );

  Widget _emptyCell(BuildContext context) => Padding(
        padding: const EdgeInsets.all(4.0),
        child: Material(
          child: Container(
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.0),
              boxShadow: const [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 4.0,
                ),
              ],
            ),
            child: Text(
              '  ',
              style: Theme.of(context).textTheme.titleLarge,
            ),
          ),
        ),
      );

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).textTheme;
    final random = Random(state.seed);
    final buttons = model.buttons..shuffle(random);
    return LayoutBuilder(builder: (context, constraints) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Flexible(
              flex: 2,
              child: AspectRatio(
                aspectRatio: 1,
                child: Container(
                  margin: const EdgeInsets.all(4.0),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius:
                        BorderRadius.circular(GameCardWidget.borderRadius),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      if (model.image != null)
                        TestImageWidget(
                          TestImage.image(model.image!),
                        ),
                      if (model.text != null)
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Center(
                            child: Text(
                              model.text!,
                              style: theme.headlineLarge,
                            ),
                          ),
                        ),
                    ],
                  ),
                ),
              ),
            ),
            StatefulBuilder(builder: (context, setState) {
              void buttonTapped((int, TestButtonDto) p) {
                if (state.answer.fold(0, (p, n) => p + n.length) >=
                    model.answer.length) {
                  return;
                }
                setState(() {
                  manager.setState(
                    model.id!,
                    state.copyWith(
                      answer: [...state.answer, p.$2.text!],
                    ),
                  );
                  manager.setState(
                    model.id!,
                    state.copyWith(
                      isAnswered: isCorrect,
                      isCorrect: isCorrect,
                    ),
                  );
                });
                print('${state.answer} ${model.answer} ${state.isCorrect}');
                if (isCorrect) {
                  Future.delayed(
                    Duration(milliseconds: 300),
                    manager.nextTest,
                  );
                }
              }

              return Expanded(
                child: Column(
                  children: [
                    Expanded(
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            manager.setState(
                              model.id!,
                              state.copyWith(
                                isAnswered: false,
                                isCorrect: false,
                                answer: [],
                                answerIndexes: [],
                              ),
                            );
                          });
                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            ...state.answer.map((e) => _letter(context, e)),
                            ...model.answer
                                .substring(
                                  state.answer.fold(0, (p, n) => p + n.length),
                                )
                                .characters
                                .map((e) => _emptyCell(context)),
                          ],
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 16.0,
                    ),
                    AbsorbPointer(
                      absorbing: state.isCorrect,
                      child: Wrap(
                        spacing: 8.0,
                        runSpacing: 8.0,
                        children: [
                          ...buttons.indexed.map(
                            (p) => Container(
                              width: p.$2.text!.length > 3 ? null : 80,
                              height: 60,
                              child: TestButton(
                                text: p.$2.text,
                                onTap: () => buttonTapped(p),
                                color: state.answer == p.$2
                                    ? isCorrect
                                        ? Colors.green[200]
                                        : Colors.red[200]
                                    : Colors.white,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            })
          ],
        ),
      );
    });
  }
}