import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:telnow_mobile_new/src/layouts/components/template.dart';
import 'package:telnow_mobile_new/src/layouts/web/request_create.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 WebBannerDetailPage extends StatefulWidget {
  final Map<String, dynamic> user;
  final Map<String, dynamic> data;
  const WebBannerDetailPage({required this.user, required this.data, super.key});

  @override
  State<WebBannerDetailPage> createState() => _WebBannerDetailPageState();
}

class _WebBannerDetailPageState extends State<WebBannerDetailPage> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    if(mounted){
      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: backgroundColor,
      appBar: PreferredSize(preferredSize: Size.fromHeight(0), child: AppBar(elevation: 0, backgroundColor: primaryColor)),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(vertical: 25, horizontal: 100),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(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'], style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500), overflow: TextOverflow.ellipsis),
                GestureDetector(
                  child: Text('buttonBack'.tr(), style: TextStyle(color: primaryColor, fontSize: 14)),
                  onTap: ()=>navigateBack(context),
                )
              ],
            ),
          ),
          divider(),
          Expanded(
            child: SingleChildScrollView(
              padding: EdgeInsets.symmetric(vertical: 25, horizontal: 100),
              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)
                  ) : LayoutBuilder(
                    builder: (context, constraints) => Container(
                      width: double.infinity,
                      height: constraints.maxWidth / 3.2,
                      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.left,
                    onOpen: (link) async {
                      if (await canLaunchUrl(Uri.parse(link.url))) {
                        await launchUrl(Uri.parse(link.url));
                      }
                    },
                  ),
                  SizedBox(height: 25),
                  widget.data['_requestAttached'] != null ? Text("related".tr(), style: TextStyle(color: textColor, fontSize: 16, fontWeight: FontWeight.w600)) : 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, WebReqCreatePage(user: widget.user, request: widget.data['_requestAttached'][i], fromSearch: true)),
                        );
                      }),
                    ):Container(),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
