import 'dart:convert';
import 'package:manager_app/l10n/app_localizations.dart';

import 'package:flutter/material.dart';
import 'package:html/parser.dart' as html_parser;
import 'package:manager_app/Components/multi_string_input_html_modal.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_api_new/api.dart';
import 'package:provider/provider.dart';

/// Le jumeau de `MultiStringInputContainer` pour les traductions qui portent
/// aussi une ressource. Même champ : libellé au-dessus, aperçu, pastilles de
/// langue — au lieu d'un libellé à gauche et d'une grosse pastille « Changer ».
class MultiStringInputAndResourceContainer extends StatelessWidget {
  final Color color;
  final String label;
  final String modalLabel;
  final List<TranslationAndResourceDTO> initialValue;
  final Function onGetResult;
  final int maxLines;
  final bool isTitle;
  final List<ResourceType>? resourceTypes;
  final double fontSize;
  const MultiStringInputAndResourceContainer({
    Key? key,
    this.color = kSurface2,
    required this.label,
    required this.modalLabel,
    required this.initialValue,
    required this.onGetResult,
    required this.maxLines,
    required this.isTitle,
    this.resourceTypes = null,
    this.fontSize = 25,
  }) : super(key: key);

  String _plainText(String htmlOrText) {
    if (htmlOrText.trim().isEmpty) return "";
    try {
      final doc = html_parser.parse(htmlOrText);
      final text = (doc.body?.text ?? htmlOrText).trim();
      return text.isEmpty ? htmlOrText.trim() : text;
    } catch (_) {
      return htmlOrText;
    }
  }

  @override
  Widget build(BuildContext context) {
    final l = AppLocalizations.of(context)!;
    final appContext = Provider.of<AppContext>(context);
    ManagerAppContext managerAppContext = appContext.getContext();
    final languages = managerAppContext.selectedConfiguration!.languages!;

    final preview = _plainText(initialValue.isEmpty
        ? ""
        : (initialValue
                .firstWhere((t) => t.language == 'FR',
                    orElse: () => initialValue.first)
                .value ??
            ""));
    final isEmpty = preview.isEmpty;

    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: kLabelField),
        const SizedBox(height: kSpace2),
        Material(
          color: Colors.transparent,
          child: InkWell(
            borderRadius: BorderRadius.circular(kRadiusInput),
            onTap: () {
              List<TranslationAndResourceDTO> newValues =
                  <TranslationAndResourceDTO>[];
              List<TranslationAndResourceDTO> initials = initialValue;

              languages.forEach((value) {
                if (initials.map((iv) => iv.language).contains(value)) {
                  newValues.add(TranslationAndResourceDTO.fromJson(jsonDecode(
                      jsonEncode(initials
                          .firstWhere((element) => element.language == value)))!)!);
                } else {
                  newValues.add(TranslationAndResourceDTO(
                      language: value, value: "", resource: null));
                }
              });

              showMultiStringInputAndResourceHTML(label, modalLabel, isTitle,
                  initials, newValues, onGetResult, maxLines, resourceTypes, context);
            },
            child: Container(
              padding: const EdgeInsets.symmetric(
                  horizontal: kSpace4, vertical: kSpace3),
              decoration: BoxDecoration(
                color: kSurface2,
                border: Border.all(color: kLine),
                borderRadius: BorderRadius.circular(kRadiusInput),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Text(
                      isEmpty ? l.noTextYet : preview,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 13,
                        color: isEmpty ? kInk3 : kInk,
                        fontStyle:
                            isEmpty ? FontStyle.italic : FontStyle.normal,
                      ),
                    ),
                  ),
                  const SizedBox(width: kSpace3),
                  for (final language in languages)
                    Padding(
                      padding: const EdgeInsets.only(left: kSpace1),
                      child: _LanguageBadge(
                        language: language,
                        isFilled: initialValue.any((t) =>
                            t.language == language &&
                            (t.value ?? "").trim().isNotEmpty),
                      ),
                    ),
                  const SizedBox(width: kSpace3),
                  const Icon(Icons.edit_outlined, size: 16, color: kInk3),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class _LanguageBadge extends StatelessWidget {
  const _LanguageBadge({required this.language, required this.isFilled});

  final String language;
  final bool isFilled;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: kSpace2, vertical: 3),
      decoration: BoxDecoration(
        color: isFilled ? kSurface3 : Colors.transparent,
        border: isFilled ? null : Border.all(color: kLineSoft),
        borderRadius: BorderRadius.circular(kRadiusInput),
      ),
      child: Text(
        language,
        style: TextStyle(
          fontSize: 10.5,
          fontWeight: FontWeight.w600,
          letterSpacing: 0.5,
          color: isFilled ? kPrimaryColor : kInk3,
        ),
      ),
    );
  }
}