import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:telnow_mobile_new/src/layouts/mobile/request_create.dart';
import 'package:telnow_mobile_new/src/layouts/components/template.dart';
import 'package:telnow_mobile_new/src/utils/U.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

class MobBannerDetailPage extends StatefulWidget {
  final Map<String, dynamic> user;
  final Map<String, dynamic> data;
  const MobBannerDetailPage({required this.user, required this.data, super.key});

  @override
  State<MobBannerDetailPage> createState() => _MobBannerDetailPageState();
}

class _MobBannerDetailPageState extends State<MobBannerDetailPage> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    if(widget.data['videoId'] != null){
      _controller = YoutubePlayerController.fromVideoId(
        videoId: widget.data['videoId'],
        autoPlay: true,
        params: const YoutubePlayerParams(
          showFullscreenButton: false,
          loop: true,
          showControls: false,
          strictRelatedVideos: true,
          showVideoAnnotations: false,
          enableCaption: false,
          enableKeyboard: false,
        ),
      );
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: appBarTemplate(context: context, exc: false, title: widget.data[U.langColumn(context, 'title')]!=null && widget.data[U.langColumn(context, 'title')]!=''?widget.data[U.langColumn(context, 'title')]:widget.data['titleEn']!=null?widget.data['titleEn']:widget.data['title']),
      body: Column(
        children: [
          divider(),
          Expanded(
            child: Container(
              alignment: Alignment.topCenter,
              width: U.bodyWidth(context),
              child: SingleChildScrollView(
                padding: EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    widget.data['videoId'] != null ? YoutubePlayer(
                      controller: _controller,
                      aspectRatio: 16 / 9,
                    ) : widget.data['image'] != null ? ClipRRect(
                        borderRadius: BorderRadius.circular(8.0),
                        child: Image.network(widget.data['image']+'?bridge-cache=true', width: double.infinity, fit: BoxFit.fitWidth,)
                    ) : Container(
                      width: double.infinity,
                      height: U.bodyWidth(context) / (kIsWeb ? 2.1 : 1.7),
                      child: Center(child: Text("noImage".tr(), style: TextStyle(fontStyle: FontStyle.italic, color: Colors.black38), textAlign: TextAlign.center)),
                      decoration: BoxDecoration(
                        color: textColor.withValues(alpha: 0.1),
                        borderRadius: BorderRadius.all(Radius.circular(12)),
                      ),
                    ),
                    SizedBox(height: 16),
                    Linkify(
                      text: widget.data[U.langColumn(context, 'description')]!=null && widget.data[U.langColumn(context, 'description')]!=''?widget.data[U.langColumn(context, 'description')]:widget.data['descriptionEn']!=null?widget.data['descriptionEn']:widget.data['description'], style: TextStyle(color: textColor, fontSize: 14), textAlign: TextAlign.justify,
                      onOpen: (link) async {
                        if (await canLaunchUrl(Uri.parse(link.url))) {
                          await launchUrl(Uri.parse(link.url));
                        }
                      },
                    ),
                    SizedBox(height: 24),
                    widget.data['_requestAttached'] != null ? Text("related".tr(), style: TextStyle(color: textColor, fontSize: 16, fontWeight: FontWeight.w500)) : Container(),
                    Padding(
                      padding: EdgeInsets.only(top: 12, bottom: 16),
                      child: widget.data['_requestAttached']!=null?Column(
                        children: List.generate(widget.data['_requestAttached'].length, (i){
                          return GestureDetector(
                            child: requestTiles(
                              image: widget.data['_requestAttached'][i]['_mobileImage'] ?? "null",
                              title: widget.data['_requestAttached'][i][U.langColumn(context, 'subject')],
                              subtitle: widget.data['_requestAttached'][i][U.langColumn(context, 'subjectDescription')],
                            ),
                            onTap: ()=>navigateTo(context, MobReqCreatePage(user: widget.user, request: widget.data['_requestAttached'][i], fromSearch: true)),
                          );
                        }),
                      ):Container(),
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}
