import 'package:flutter/material.dart';
import 'package:manager_api_new/api.dart';
import 'package:tablet_app/Components/cached_custom_resource.dart';
import 'package:tablet_app/Components/narrator_avatar.dart';

/// Audio d'un point de carte (plan Studio lot 8e) : le point range un identifiant de ressource,
/// résolu ici, avec le portrait du narrateur quand c'est une narration.
class PointAudio extends StatefulWidget {
  const PointAudio({Key? key, required this.resourceId, required this.resourceApi}) : super(key: key);

  final String resourceId;
  final ResourceApi resourceApi;

  @override
  State<PointAudio> createState() => _PointAudioState();
}

class _PointAudioState extends State<PointAudio> {
  /// Gardé : la fiche du point se reconstruit souvent, et chaque reconstruction relancerait la requête.
  late Future<ResourceDTO?> _resource;

  @override
  void initState() {
    super.initState();
    _resource = widget.resourceApi.resourceGetDetail(widget.resourceId);
  }

  @override
  void didUpdateWidget(PointAudio oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.resourceId != widget.resourceId) {
      _resource = widget.resourceApi.resourceGetDetail(widget.resourceId);
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ResourceDTO?>(
      future: _resource,
      builder: (context, snapshot) {
        final resource = snapshot.data;
        if (resource?.url == null) return const SizedBox.shrink();

        final player = CachedCustomResource(resourceDTO: resource!, isAuto: false, webView: false);
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: resource.narratorName == null
              ? Align(alignment: Alignment.centerLeft, child: player)
              : Row(
                  children: [
                    NarratorAvatar(name: resource.narratorName!, portraitUrl: resource.narratorPortraitUrl),
                    const SizedBox(width: 16),
                    player,
                  ],
                ),
        );
      },
    );
  }
}