import 'package:flutter/material.dart';
import 'package:manager_app/Components/check_input_container.dart';
import 'package:manager_app/Components/collection_editor.dart';
import 'package:manager_app/Components/multi_string_input_container.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/Slider/content_fields.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_api_new/api.dart';
import 'package:manager_app/l10n/app_localizations.dart';
import 'package:provider/provider.dart';

class ArticleConfig extends StatefulWidget {
  final String? color;
  final String? label;
  final ArticleDTO initialValue;
  final ValueChanged<ArticleDTO> onChanged;
  const ArticleConfig({
    Key? key,
    this.color,
    this.label,
    required this.initialValue,
    required this.onChanged,
  }) : super(key: key);

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

class _ArticleConfigState extends State<ArticleConfig> {
  late ArticleDTO articleDTO;

  @override
  void initState() {
    super.initState();
    articleDTO = widget.initialValue;
    articleDTO.contents = List<ContentDTO>.from(articleDTO.contents!);
    articleDTO.contents!.sort((a, b) => a.order!.compareTo(b.order!));
  }

  /// Le backend ne veut que les contenus qui portent réellement une ressource —
  /// c'est ce que faisait déjà le filtre de l'ancien `onChanged`.
  void _persist() {
    var i = 0;
    for (final content in articleDTO.contents!) {
      content.order = i;
      i++;
    }

    final toSend = ArticleDTO();
    toSend.contents = articleDTO.contents!
        .where((content) => content.resource?.url != null)
        .toList();
    toSend.audioIds = articleDTO.audioIds;
    toSend.isContentTop = articleDTO.isContentTop;
    toSend.content = articleDTO.content;
    toSend.isReadAudioAuto = articleDTO.isReadAudioAuto;
    widget.onChanged(toSend);
  }

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

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        LayoutBuilder(
          builder: (context, constraints) {
            final text = Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                MultiStringInputContainer(
                  label: l.displayedContentLabel,
                  modalLabel: l.contentModalLabel,
                  isHTML: true,
                  initialValue: articleDTO.content!,
                  isTitle: false,
                  onGetResult: (value) {
                    setState(() => articleDTO.content = value);
                    _persist();
                  },
                  maxLines: 1,
                  showPreview: true,
                ),
                const SizedBox(height: kSpace4),
                CheckInputContainer(
                  label: l.contentOnTopLabel,
                  isChecked: articleDTO.isContentTop,
                  onChanged: (value) {
                    setState(() => articleDTO.isContentTop = value);
                    _persist();
                  },
                ),
              ],
            );

            final audio = Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                MultiStringInputContainer(
                  label: l.audioColonLabel,
                  resourceTypes: [ResourceType.Audio],
                  modalLabel: l.audioModalLabel,
                  initialValue: articleDTO.audioIds!,
                  isTitle: false,
                  onGetResult: (value) {
                    setState(() => articleDTO.audioIds = value);
                    _persist();
                  },
                  maxLines: 1,
                ),
                const SizedBox(height: kSpace4),
                CheckInputContainer(
                  label: l.autoPlayAudioLabel,
                  isChecked: articleDTO.isReadAudioAuto,
                  onChanged: (value) {
                    setState(() => articleDTO.isReadAudioAuto = value);
                    _persist();
                  },
                ),
              ],
            );

            if (constraints.maxWidth > 620) {
              return Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(child: text),
                  const SizedBox(width: kSpace5),
                  Expanded(child: audio),
                ],
              );
            }
            return Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [text, const SizedBox(height: kSpace5), audio],
            );
          },
        ),
        const SizedBox(height: kSpace6),
        Text(l.imagesLabel, style: kLabelField),
        const SizedBox(height: kSpace2),
        CollectionEditor<ContentDTO>(
          items: articleDTO.contents!,
          addLabel: l.addContentLabel,
          itemLabel: (content, index) => contentLabel(l, content, index),
          createItem: () => emptyContent(languages),
          onChanged: (_) => _persist(),
          detailBuilder: (content, index) => ContentFields(
            key: ValueKey(identityHashCode(content)),
            content: content,
            onChanged: _persist,
            showDescription: false,
          ),
        ),
      ],
    );
  }
}