fluffychat/lib/pangea/toolbar/message_practice/message_morph_choice.dart

import 'package:flutter/material.dart';

import 'package:collection/collection.dart';

import 'package:fluffychat/l10n/l10n.dart';
import 'package:fluffychat/pangea/analytics_details_popup/morph_meaning_widget.dart';
import 'package:fluffychat/pangea/analytics_misc/construct_type_enum.dart';
import 'package:fluffychat/pangea/common/widgets/choice_animation.dart';
import 'package:fluffychat/pangea/constructs/construct_form.dart';
import 'package:fluffychat/pangea/constructs/construct_identifier.dart';
import 'package:fluffychat/pangea/events/models/pangea_token_model.dart';
import 'package:fluffychat/pangea/morphs/morph_features_enum.dart';
import 'package:fluffychat/pangea/morphs/morph_icon.dart';
import 'package:fluffychat/pangea/practice_activities/practice_activity_model.dart';
import 'package:fluffychat/pangea/practice_activities/practice_choice.dart';
import 'package:fluffychat/pangea/toolbar/message_practice/message_morph_choice_item.dart';
import 'package:fluffychat/pangea/toolbar/message_practice/practice_controller.dart';

// this widget will handle the content of the input bar when mode == MessageMode.wordMorph

// if initializing, with a selectedToken then we should show an activity if one is available
// in this case, we'll set selectedMorph to the first morph available for the selected token

// if initializing with a selectedMorph then we should show the first activity available for that morph
// if no activity available for that morph, then we should just show the details of the feature and tag

// the details of a morph will allow the user to edit the morphological tag of that feature.

const int numberOfMorphDistractors = 3;

class MessageMorphInputBarContent extends StatefulWidget {
  final PracticeController controller;
  final MorphPracticeActivityModel activity;
  final PangeaToken? selectedToken;
  final double maxWidth;

  const MessageMorphInputBarContent({
    super.key,
    required this.controller,
    required this.activity,
    required this.selectedToken,
    required this.maxWidth,
  });

  @override
  MessageMorphInputBarContentState createState() =>
      MessageMorphInputBarContentState();
}

class MessageMorphInputBarContentState
    extends State<MessageMorphInputBarContent> {
  String? selectedTag;

  PangeaToken get token => widget.activity.tokens.first;
  MorphFeaturesEnum get morph => widget.activity.morphFeature;

  @override
  void didUpdateWidget(covariant MessageMorphInputBarContent oldWidget) {
    final selected = widget.controller.selectedMorph?.morph;
    if (morph != selected || token != oldWidget.selectedToken) {
      setState(() {});
    }
    super.didUpdateWidget(oldWidget);
  }

  TextStyle? textStyle(BuildContext context) => widget.maxWidth > 600
      ? Theme.of(context).textTheme.bodyLarge?.copyWith(
            fontWeight: FontWeight.bold,
          )
      : Theme.of(context).textTheme.bodyMedium?.copyWith(
            fontWeight: FontWeight.bold,
          );

  @override
  Widget build(BuildContext context) {
    final iconSize = widget.maxWidth > 600
        ? 28.0
        : widget.maxWidth > 600
            ? 24.0
            : 16.0;
    final spacing = widget.maxWidth > 600
        ? 16.0
        : widget.maxWidth > 600
            ? 8.0
            : 4.0;

    return Column(
      spacing: spacing,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: spacing,
          children: [
            MorphIcon(
              morphFeature: morph,
              morphTag: null,
              size: Size(iconSize, iconSize),
              showTooltip: false,
            ),
            Flexible(
              child: Text(
                L10n.of(context).whatIsTheMorphTag(
                  morph.getDisplayCopy(context),
                  token.text.content,
                ),
                style: textStyle(context),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
        Wrap(
          alignment: WrapAlignment.center,
          runAlignment: WrapAlignment.center,
          spacing: spacing,
          runSpacing: spacing,
          children: widget.activity.multipleChoiceContent.choices.mapIndexed(
            (index, choice) {
              final wasCorrect = widget.controller.wasCorrectChoice(choice);

              return ChoiceAnimationWidget(
                isSelected: selectedTag == choice,
                isCorrect: wasCorrect,
                child: MessageMorphChoiceItem(
                  cId: ConstructIdentifier(
                    lemma: choice,
                    type: ConstructTypeEnum.morph,
                    category: morph.name,
                  ),
                  onTap: () {
                    setState(() => selectedTag = choice);
                    widget.controller.onMatch(
                      token,
                      PracticeChoice(
                        choiceContent: choice,
                        form: ConstructForm(
                          cId: widget.activity.tokens.first.morphIdByFeature(
                            widget.activity.morphFeature,
                          )!,
                          form: token.text.content,
                        ),
                      ),
                    );
                  },
                  isSelected: selectedTag == choice,
                  isGold: wasCorrect,
                  shimmer: widget.controller.showChoiceShimmer,
                ),
              );
            },
          ).toList(),
        ),
        if (selectedTag != null)
          Container(
            constraints: BoxConstraints(
              minHeight: widget.maxWidth > 600 ? 20 : 34,
            ),
            alignment: Alignment.center,
            child: MorphMeaningWidget(
              feature: morph,
              tag: selectedTag!,
              style: widget.maxWidth > 600
                  ? Theme.of(context).textTheme.bodyLarge
                  : Theme.of(context).textTheme.bodySmall,
            ),
          ),
      ],
    );
  }
}